CORRECTION D'UN JEU DES ERREURS

Bonjour à tous et toutes, Je découvre ce forum qui m'a l'air bien sympathique. Des tas d'autres forums vous envoie dans le mur quand vous n'avez pas un master informatique...
Ceci dit, j'ai fait un magnifique code pour un jeu d'erreurs à trouver entre 2 images. Seul, il marche parfaitement...
Mais, j'ai inséré dans la même page un second script qui ouvre une image de la solution au clic
Le problème que je rencontre est au niveau du décompte des erreurs qui s'affiche dans le désordre et de manière anarchique.
Je joins le code; par contre, je ne sais pas envoyer les images qui ne sont pas publiées
quelqu'un a-t-il la solution ?...

Code : Tout sélectionner

<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 {
    	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="imageA.jpg" usemap="#mymap">
    <map name="mymap" id="mymap">

          <area shape="circle" coords="583,308,18" onClick="mark(this,1);return false;">
          <area shape="circle" coords="399,468,17" onClick="mark(this,2);return false;">
          <area shape="circle" coords="502,72,14" onClick="mark(this,3);return false;">
          <area shape="circle" coords="53,513,17" onClick="mark(this,4);return false;">
          <area shape="rect" coords="74,190,185,205" onClick="mark(this,5);return false;">
          <area shape="rect" coords="321,123,360,160" onClick="mark(this,6);return false;">
          <area shape="circle" coords="451,47,18" onClick="mark(this,7);return false;">
          <area shape="circle" coords="46,12,48" onClick="mark(this,8);return false;">
        </map>
        <span id="cont"><img src="imageB.jpg" name="copie" usemap="#mymap" id="copie" alt=""></span></p>

    </div>
    </body></html>

    <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="caillasse_solution.jpg">

    </span></div>
    </body>
    </html>

Merci à tout ceux et celles qui voudront bien m'aider sans me mettre une fessée
Patapierre

FORUM D’ENTRAIDE INFORMATIQUE (FEI)
Site d’assistance et de sécurité informatique