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

Entraide pour le programmation en général (tous langages).
Règles du forum : Entraide concernant la programmation informatique en général, tous langages : recherche ou correction d'un code ou d'une fonction, aide à la réalisation d'un projet...
Pour la programmation web (HTML, CSS, PHP, MySQL...), il est conseillé de s'orienter dans le forum Webmastering.
Merci de lire et de respecter la charte générale du forum.
  • Avatar du membre
Avatar du membre
par patapierre
#199624
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
Pilote SIS 661

Je ne fais que déconner avec des piè[…]

Tchao FEI

Et je rajoute que malgré les mails, Faceboo[…]

Question sur les graphiques

J'ai donc récemment commencé à[…]

Bonjour Je me permets de demander de l'aide &agrav[…]