Bonjour,
J'ai réalisé un magnifique code pour un jeu d'erreurs entre 2 images.
Seul, il marche à merveille...
Mais dès que j'entre un deuxième script qui montre la solution en cliquant sur l'icone "?", j'ai un bugue au niveau du décompte des erreurs qui s'affiche dans le désordre.
Quelqu'un a-t-il la solution ?... Voici le code, puis les images :
mediv_A.jpg mediv_B.jpgmediv_solution.jpgclic.gifCode HTML:<html><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Jeux des erreurs Pierres-Info</title> <style type="text/css"> body { background-color: #FFFFFF; background-repeat: no-repeat; background-position: top center; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } .croix { display:none; } area{ cursor:default;} img{border:0} #cont{position:absolute; margin-left:10px;} #main { width:1200px; margin:auto; } </style> <script type="text/javascript"> var found=[]; function init(){ //les erreurs; var areas=document.getElementById('mymap').getElementsByTagName('area') var areasL=areas.length var i=-1; while(++i<areasL){ areas[i].alt=""; areas[i].href=""; areas[i].style.cursor="default"; found.push(false);} document.getElementById('copie').alt=""; } //marque function mark(area,errnr){ area.blur(); tabcoords=area.coords.split(',') //recupération des coordonnées de l'area var i=-1 while(tabcoords[++i]){ tabcoords[i]=1*tabcoords[i] } //recup coordonnées d'origine originX=+document.getElementById('copie').offsetLeft; originY=+document.getElementById('copie').offsetTop; //clone marque trouve=document.getElementById('croix').cloneNode(true) document.getElementById('cont').appendChild(trouve) // ajout de l'image trouve.style.position="absolute"; trouve.style.zIndex=100+errnr trouve.style.visibility="hidden" trouve.style.display="block" //position de la marque var crossX=0; var crossY=0; crossoffsetX=Math.floor(trouve.offsetHeight/2); crossoffsetY=Math.floor(trouve.offsetWidth/2); if(area.shape.toLowerCase()=="circle"){ crossX=tabcoords[1]-crossoffsetX crossY=tabcoords[0]-crossoffsetY } if(area.shape.toLowerCase()=="rect"){ crossX=Math.floor((tabcoords[1]+tabcoords[3])/2)-crossoffsetX crossY=Math.floor((tabcoords[0]+tabcoords[2])/2)-crossoffsetY } //attribut top/left trouve.style.top=crossX+"px"; trouve.style.left=crossY+"px"; trouve.style.visibility="visible" //ajout erreur found[errnr-1]=true var solde=0 for(i=0;i<found.length;i++){ (!found[i]) && solde++; } //solde mess=(solde>0)?'Plus que '+solde+' erreur(s)': 'Bravo Pierreux, Pierreuse, tu as de bons yeux tu sais !' document.getElementById('res').innerHTML=mess } //]]> </script> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body onload="init()"> <div id="main"> <p><img src="croix.png" id="croix" class="croix"> </p> <table width="602" cellspacing="0" cellpadding="0" border="0" align="center"> <tbody><tr> <td height="20"><div align="center"><span id="res"></span></div></td> </tr> </tbody></table> <p><img id="modele" src="mediv_A.jpg" usemap="#mymap"> <map name="mymap" id="mymap"> <area shape="rect" coords="368,213,384,230" onClick="mark(this,1);return false;"> <area shape="circle" coords="102,447,20" onClick="mark(this,2);return false;"> <area shape="circle" coords="561,332,18" onClick="mark(this,3);return false;"> <area shape="circle" coords="390,555,13" onClick="mark(this,4);return false;"> <area shape="circle" coords="140,408,14" onClick="mark(this,5);return false;"> <area shape="circle" coords="578,137,22" onClick="mark(this,6);return false;"> <area shape="circle" coords="232,37,17" onClick="mark(this,7);return false;"> <area shape="rect" coords="253,172,303,190" onClick="mark(this,8);return false;"> <area shape="circle" coords="28,213,15" onClick="mark(this,9);return false;"> <area shape="circle" coords="369,312,18" onClick="mark(this,10);return false;"> <area shape="circle" coords="338,99,14" onClick="mark(this,11);return false;"> </map> <span id="cont"><img src="mediv_B.jpg" name="copie" usemap="#mymap" id="copie" alt=""></span></p> </div> </body></html> <!doctype html> <html> <head> <html> <head> <script type="text/javascript"> function hide(that) { that.style.display = "none"; } function show(that) { that.style.display = "block"; } function cliquer(that) { var node = that.querySelector("span"); if (node.style.display == "none") show(node); else hide(node); } function infobulle() { var node = document.querySelectorAll(".infobulle"); for (var i=0; i<node.length; i++) { hide(node[ i ].querySelector("span")); node[ i ].onclick = function () { cliquer(this); }; } } window.onload = function () { infobulle(); } </script> </style> </head> <body> <div class="infobulle"> <center><img src="clic.gif"></center><span><br><br> <center><img src="mediv_solution.jpg"> </span></div> </body> </html>
Merci pour votre aide
Patapierre
-----