Salut à toute la communauté,

Voilà, je développe un site en Php et dans l'une des pages, une carte de France apparaît, l'utilisateur a la possibilité de cliqué sur chaque département, à chaque clic donc, une fonction JavaScript est appelé permettant d'affiché une liste de magasin se situant dans ce département seulement voilà ....Sous Internet Explorer, l'action ne marche pas .Voici la partie du code html avec le bloc où doivent apparaître les informations:

<div id="rech_cp">
        <fieldset>
	<legend>Recherche par code postal</legend>
	<label for="cp">Code postal : </label>
	<input type="text" id="cp" name="cp" maxlength=5 size=3 />
	<input type="button" value="Lancer la recherche" onClick="codepostal();" />
        </fieldset>
</div>			
<div id="pointsvente">
</div>
			
<div id="plan">
<img src="./images/departement/plan2.png" border="0" width="420" usemap="#ep">
</div>

Les informations doivent apparaîtrent dans le bloc nommé 'pointsvente'.

Voici la ligne où se situe l'action javascript:

<area href="#" onClick="allume('01')" onMouseOver="dep_couleur('1')" shape="polygon" coords="303, 203, 340, 207, 327, 241, 319, 234, 306, 235, 297, 221">

l'action javascript s'appelle 'allume()'.

Voici sa source:

function allume(zone) {
                var xhr = getXhr();
                xhr.onreadystatechange = function(){
                     if(xhr.readyState == 4 && xhr.status == 200){
                        di = document.getElementById('pointsvente');
                        di.innerHTML = xhr.responseText;
                    }
                }
				di = document.getElementById('pointsvente');
                di.innerHTML = "";
                xhr.open("POST","dep.php",true);
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                xhr.send("zone="+zone);
            }

La fonction JavaScript est chargé d'envoyé le code postal, reçu en paramètre, à un fichier php qui va se charger d'effectuer une requete sql et d'afficher le résultat.

Salut,

Mets les attributs en minuscules ( onclick et pas onClick)

Ca ne va pas résoudre ton problème mais ce sera plus correct.

Ensuite, fait voir ta fonction getXhr(); Et s'il y a une erreur sous IE tu appuie sur F12 pour qu'il te dise ce qu'il ne lui plait pas

Salut LCaba,

Voici la fonction getXhr():

function getXhr()
{
                var xhr = null;
                if(window.XMLHttpRequest){ // Firefox et autres
                   xhr = new XMLHttpRequest();
                }
                else if(window.ActiveXObject){ // Internet Explorer
                   try {  xhr = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch (e) {
                          xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                }
                else { alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
                       xhr = false;
                     }
                return xhr;
}

Ensuite pour la touche F12, c'est la première fois que je m'en sers, il ne m'affiche pas vraiment d'erreur à première vue, j'ai bien changé la syntaxe de 'onclick()'. Je confirme que sous firefox et sous chrome, il n'y a pas d'erreur.

Merci de ton aide

Il faut appuyer sur F12 puis cliquer sur Script >> Démarrer le débogage.
Dans tous les cas, avec IE, s'il y a une erreur de script sur la page, une petite icône d'avertissement apparaît à gauche dans la barre d'état :

Alors, je viens de faire des test et bonne nouvelle,je sais exactement d'où vient le problème... merci, merci mais je ne sais toujours pas le résoudre .

Donc voilà,
Comme je disais j'affiche une carte de France dans laquelle l'utilisateur peut cliqué sur les département, au passage de la souris, les départements changent de couleur,j'ai donc une image pour chaque département... oui, c'est du lourd.
Voici le code html:

<div id="plan">
<img src="./images/departement/plan2.png" border="0" width="420" usemap="#ep" />
</div>

<map name="ep">
<area href="#" onclick="allume('01')" onmouseover="dep_couleur('1')" shape="polygon" coords="303, 203, 340, 207, 327, 241, 319, 234, 306, 235, 297, 221">
</map>

En gros,ici j'affiche une image de la France dans le bloc 'plan', cette image va être mappé en utilisant la propriété 'usemap'.

Chaque balise 'area' est donc un polygone représentant un département (je vous en ai mis qu'un seul pour l'exemple ) et donc à chaque passage de la souris, je fais appel à la fonction 'dep_couleur()', cette fonction a pour rôle de remplacer l'image actuelle par l'image ayant le département coloré ET ayant la propriété permettant d'être mappé, voici la fonction:

function dep_couleur(cp) {
                var xhr = getXhr();
                xhr.onreadystatechange = function(){
                     if(xhr.readyState == 4 && xhr.status == 200){
                        di = document.getElementById('plan');	
                    }
                }
				di = document.getElementById('plan');
				di.innerHTML = "";
				di.innerHTML = "<img src=\"./images/departement/"+cp+".png\" border=\"0\" width=\"420\" usemap=\"#ep\" />";}

Et le problème vient d'ici, dès que l'image est chargé à partir du JavaScript, ie ne reconnait plus le mappage.Les images changent et les zones cliquable existent toujours mais la fonction 'allume()' permettant de sortir des informations ne marchent plus. Si je garde l'image d'origine, la fonction remarche...

Si vous avez des idées ou une autre manière de changer une image, je suis preneur

Merci de m'avoir lu
et de votre aide

document.getElementById("une image").setAttribute("src", "./images/departement/"+cp+".png");

?

plutôt que de générer une image dans ton DOM à chaque fois

Salut shivaan,

Sa marche parfaitement bien et sur tout les navigateurs, c'est vrai que c'est beaucoup moins lourd maintenant.

Je vous remercie tout les deux ,LCaba et Shivaan

à bientôt, merci encore

Je t'en prie ^_^