IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Jeu des 7 erreurs


Sujet :

JavaScript

  1. #41
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Octobre 2009
    Messages
    394
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Octobre 2009
    Messages : 394
    Par défaut
    Maintenant on peut calculer par différence la position a donner à la croix pour qu'elle se positionne au centre de l'area quelque soit ses dimensions et son type cercle ou rectangle ... pour coller la crois
    C'est encore mieux :-)

    Pour ce qui est du compteur, je ne trouve pas le problème, je ne trouve aucune variable avec le nombre max d'erreur... :-/ Ce qui est étrange, c'est que cela varie selon l'ordre des erreurs trouvées ?

    EDIT :
    Si cela peut t'aider :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="description" content="LIGUE BELGE DE LA SCLEROSE EN PLAQUES ASBL - Communautée Française" /> 
    <meta name="keywords" content="ligue belge, sclerose en plaques, asbl, sep-pas-sorcier" />
    <title>Jeu des 7 erreurs | SEP | 081/40.15.55|</title>
    <style type="text/css">
    body {
    	background-color: #FFFFFF;
    	background-image: url(background.jpg);
    	background-repeat: no-repeat;
    	background-position: top center;
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    }
    .Style1 {
    	color: #993300;
    	font-weight: bold;
    	font-size: 18px;
    }
    .Style2 {font-size: 12px}
    .Style3 {font-size: 12px; font-weight: bold; }
    .Style5 {color: #660000}
    .croix {
    display:none;
    }
    area{ cursor:default;}
    </style>
     
    <script type="text/javascript">
    //erreurs trouvées By SpaceFrog for SEP-pas-sorcier
    //erreurs trouvées 
    var found=[false, false, false]
     
    //ajout de croix
    function mark(coords,errnr){
    tabcoords=coords.split(',') //recupération des coordonnées de l'area
    //recupération des coordonnées d'origine de l'image
    originX=+document.getElementById('copie').offsetLeft-10;
    originY=+document.getElementById('copie').offsetTop-10;
     
    //clonage de la croix
    trouve=document.getElementById('croix').cloneNode(true)
    //attribution des top et left + css
    trouve.style.top=+tabcoords[1]+originY+"px";
    trouve.style.left=+tabcoords[0]+originX+"px";
    trouve.style.position="absolute";
    trouve.style.zIndex=100
    trouve.style.display="block"
    document.body.appendChild(trouve) // ajout de l'image
     
    //ajout d'une erreru trouvée 
    found[errnr-1]=true
    var solde=0
    for(i=0;i<found.length;i++){
     (!found[i]) && solde++;
     }
    //affichage du soldes
    mess=(solde>0)?'Il reste '+solde+' erreur(s)': 'Bravo !'
    document.getElementById('res').innerHTML=mess
    }
    </script>
    <!-- GOOGLE ANALYTIC -->
    <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-XXXXXXXXXX-XX']);
    _gaq.push(['_trackPageview']);
     
    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
    </script>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
    <div align="center">
      <p><img src="pics/croix.png" id="croix" class="croix"/>    </p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p><img src="pics/imageA.jpg" name="modele" id="modele" />
         <map name="mymap">
    <area shape="circle" coords="21,379,12" onClick="mark(this.coords,1);return false;">
    <area shape="circle" coords="371,494,12" onClick="mark(this.coords,2);return false;">
    <area shape="circle" coords="294,191,12" onClick="mark(this.coords,3);return false;">
    <area shape="circle" coords="130,125,12" onClick="mark(this.coords,4);return false;">
    <area shape="circle" coords="116,216,12" onClick="mark(this.coords,5);return false;">
    <area shape="circle" coords="273,540,12" onClick="mark(this.coords,6);return false;">
    <area shape="circle" coords="122,162,20" onClick="mark(this.coords,7);return false;">
    </map>
      <img src="pics/imageB.jpg" name="copie" usemap="#mymap" id="copie" /></p>
        <table width="602" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td height="20"><div align="center"><span id="res"></span></div></td>
        </tr>
      </table>
    </div>
    <table  width="100%" height="442" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td class="td" width="100%" height="80">&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>
    Le compteur fonctionne, si je trouve la dernière erreur en premier, la 7 ! Si je ne commence pas par trouver la 7ième erreur, le compteur aura le bon compte, lorsque je trouverai la 7ième, pour résumer le compteur aura le bon compte lorsque l'erreur 7 sera trouvée.

  2. #42
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 661
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 76
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 661
    Billets dans le blog
    1
    Par défaut
    Voici une version qui gère automatiquement le nombre d'areas (donc d'erreurs) et le centrage de la croix sur la zone (cercle ou rect)

    A verifier tout de même le sens height et width de la croix (ici elle est carrée)
    mais si ce n'était pas le cas ...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Nouvelle page 1</title>
    <style type="text/css">
    .croix {
    display:none;
    }
    area{ cursor:default;}
    img{border:0}
    </style>
    <script type="text/javascript">
    var found=[];
    function init(){
    //erreurs a trouver  ;
    var areasL=document.getElementById('mymap').getElementsByTagName('area').length
    var i=-1;
    while(++i<areasL){found.push(false);}
    }
     
    //ajout de croix
    function mark(area,errnr){
    tabcoords=area.coords.split(',') //recupération des coordonnées de l'area
    var i=-1
    while(tabcoords[++i]){
    tabcoords[i]=1*tabcoords[i]
    }
    //recupération des coordonnées d'origine de l'image
    originX=+document.getElementById('copie').offsetLeft;
    originY=+document.getElementById('copie').offsetTop;
     
    //clonage de la croix
    trouve=document.getElementById('croix').cloneNode(true)
    document.body.appendChild(trouve) // ajout de l'image
    trouve.style.position="absolute";
    trouve.style.zIndex=100
    trouve.style.visibility="hidden"
    trouve.style.display="block"
     
    //position de la croix 
    var crossX=0;
    var crossY=0;
    crossoffsetX=Math.floor(trouve.offsetHeight/2);
    crossoffsetY=Math.floor(trouve.offsetWidth/2);
     
     
    if(area.shape.toLowerCase()=="circle"){
    crossX=originY+tabcoords[1]-crossoffsetX
    crossY=originX+tabcoords[0]-crossoffsetY
    }
    if(area.shape.toLowerCase()=="rect"){
    crossX=originY+Math.floor((tabcoords[1]+tabcoords[3])/2)-crossoffsetX
    crossY=originX+Math.floor((tabcoords[0]+tabcoords[2])/2)-crossoffsetY
    }
     
    //attribution des top et left 
    trouve.style.top=crossX+"px";
    trouve.style.left=crossY+"px";
    trouve.style.visibility="visible"
     
    //ajout d'une erreur trouvée 
    found[errnr-1]=true
    var solde=0
    for(i=0;i<found.length;i++){
     (!found[i]) && solde++;
     }
    //affichage du solde
    mess=(solde>0)?'Il reste '+solde+' erreur(s)': 'Bravo !'
    document.getElementById('res').innerHTML=mess
    }
    </script>
    </head>
    <body onload='init()'>
    <img src="pics/croix.png" id="croix" class="croix"/>
     <img id="modele" src="pics/imageA.jpg" usemap="#mymap" />
     <map name="mymap" id="mymap"> 
     <area shape="circle" coords="227, 146, 20" onclick="mark(this,1);return false;">
     <area shape="circle" coords="278, 361, 30" onclick="mark(this,2);return false;">
     <area shape="circle" coords="19, 282, 20" onclick="mark(this,3);return false;">
     <area shape="rect" coords="39, 100, 136, 163" onclick="mark(this,4);return false;"></map>
     <img id="copie" src="pics/imageB.jpg" usemap="#mymap" /><br/> 
     <span id="res"></span>
    </body>
    </html>
    A passage sur ton site tu as un souci de charset
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #43
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Octobre 2009
    Messages
    394
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Octobre 2009
    Messages : 394
    Par défaut
    Merci , je test

    Heeeee, charset ?

  4. #44
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 661
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 76
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 661
    Billets dans le blog
    1
    Par défaut
    oui charset , l'encodage ...
    regarde ton code sourcé généré ... les accents ...

    ta page doit etre sauvegardée en ISO ...
    change la balise dans le head ;..

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    Par contre il semblerait que tu aies un souci avec les areas sur le site ...
    les coordonnées des areas dépassent la taille l'image...
    [edit]
    arf non ce sont mes image qui sont plsu petites :grin:
    Je n'ai pas le souci de décompte en local ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #45
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Octobre 2009
    Messages
    394
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Octobre 2009
    Messages : 394
    Par défaut
    Au sujet de :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    &
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    Sais-tu me dire pourquoi je dois mettre le premier code sur certaines pages et le deuxième code sur d'autres pour avoir les accents ?

    Encore merci, cela fonctionne très bien, compteur, etc... :-)

  6. #46
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 661
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 76
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 661
    Billets dans le blog
    1
    Par défaut
    Celà depend en fait de plusieurs choses

    du charset du fichier lui même
    du charset que le serveur envoie dans le header
    du charset de la balise meta

    perso je travaille en 100% utf8
    http://j-willette.developpez.com/tut...-site-en-utf8/
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  7. #47
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 661
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 76
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 661
    Billets dans le blog
    1
    Par défaut
    juste un dernier souci de position de croix lors d'un redim de la page
    je corrige...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  8. #48
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 661
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 76
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 661
    Billets dans le blog
    1
    Par défaut
    Essaye ceci
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Nouvelle page 1</title>
    <style type="text/css">
    .croix {
    display:none;
    }
    area{ cursor:default;}
    img{border:0}
    #cont{position:absolute;}
    </style>
    <script type="text/javascript">
    var found=[];
    function init(){
    //erreurs a trouver  ;
    var areasL=document.getElementById('mymap').getElementsByTagName('area').length
    var i=-1;
    while(++i<areasL){found.push(false);}
    }
     
    //ajout de croix
    function mark(area,errnr){
     
    tabcoords=area.coords.split(',') //recupération des coordonnées de l'area
    var i=-1
    while(tabcoords[++i]){
    tabcoords[i]=1*tabcoords[i]
    }
    //recupération des coordonnées d'origine de l'image
    originX=+document.getElementById('copie').offsetLeft;
    originY=+document.getElementById('copie').offsetTop;
     
    //clonage de la croix
    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 croix 
    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
    }
     
    //attribution des top et left 
    trouve.style.top=crossX+"px";
    trouve.style.left=crossY+"px";
    trouve.style.visibility="visible"
     
    //ajout d'une erreur trouvée 
    found[errnr-1]=true
    var solde=0
    for(i=0;i<found.length;i++){
     (!found[i]) && solde++;
     }
    //affichage du solde
    mess=(solde>0)?'Il reste '+solde+' erreur(s)': 'Bravo !'
    document.getElementById('res').innerHTML=mess
    }
    </script>
    </head>
    <body onload='init()'>
     <img id="modele" src="pics/imageA.jpg" usemap="#mymap" /> 
        <map name="mymap" id="mymap">  
          <area shape="circle" coords="21, 379, 12" onClick="mark(this,1);return false;">
          <area shape="circle" coords="371, 494, 12" onClick="mark(this,2);return false;">
          <area shape="circle" coords="294, 191, 12" onClick="mark(this,3);return false;">
          <area shape="circle" coords="130, 125, 12" onClick="mark(this,4);return false;">
          <area shape="circle" coords="116, 216, 12" onClick="mark(this,5);return false;">
          <area shape="circle" coords="273, 540, 12" onClick="mark(this,6);return false;">
          <area shape="rect" coords="79,149,176,173" onClick="mark(this,7);return false;">
         </map>
          <span id="cont"> 
          <img id="copie" src="pics/imageB.jpg" usemap="#mymap" /><br/>  
     <span id="res"></span>
     </span>
     <img src="pics/croix.png" id="croix" class="croix"/>
    </body>
    </html>
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  9. #49
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 661
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 76
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 661
    Billets dans le blog
    1
    Par défaut
    Avec deux ou trois petite corrections:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso 1851-1" />
    <title>Nouvelle page 1</title>
    <style type="text/css">
    .croix {
    display:none;
    }
    area{ cursor:default;}
    img{border:0; float:left;}
    #cont{position:absolute;
    margin-left:10px;}
    </style>
    <script type="text/javascript">
    //<![CDATA[
    var found=[];
    function init(){
    //erreurs a trouver  ;
    var areas=document.getElementById('mymap').getElementsByTagName('area')
    var areasL=areas.length
    var i=-1;
    while(++i<areasL){
    areas[i].alt="";
    areas[i].href="";
    found.push(false);}
    document.getElementById('copie').alt="";
    }
     
    //ajout de croix
    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ération des coordonnées d'origine de l'image
    originX=+document.getElementById('copie').offsetLeft;
    originY=+document.getElementById('copie').offsetTop;
     
    //clonage de la croix
    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 croix 
    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
    }
     
    //attribution des top et left 
    trouve.style.top=crossX+"px";
    trouve.style.left=crossY+"px";
    trouve.style.visibility="visible"
     
    //ajout d'une erreur trouvée 
    found[errnr-1]=true
    var solde=0
    for(i=0;i<found.length;i++){
     (!found[i]) && solde++;
     }
    //affichage du solde
    mess=(solde>0)?'Il reste '+solde+' erreur(s)': 'Bravo !'
    document.getElementById('res').innerHTML=mess
    }
    //]]>
    </script>
    </head>
    <body onload='init()'>
    <div>
     <img id="modele" src="pics/imageA.jpg"  alt="modele" /> 
        <map name="mymap" id="mymap">  
          <area shape="circle" coords="21, 379, 12" onclick="mark(this,1);return false;" alt="erreur 1" href="#" />
          <area shape="circle" coords="371, 494, 12" onclick="mark(this,2);return false;" alt="erreur 2"  href="#"  />
          <area shape="circle" coords="294, 191, 12" onclick="mark(this,3);return false;" alt="erreur 3" href="#"  />
          <area shape="circle" coords="130, 125, 12" onclick="mark(this,4);return false;" alt="erreur 4"  href="#" />
          <area shape="circle" coords="116, 216, 12" onclick="mark(this,5);return false;" alt="erreur 5" href="#"  />
          <area shape="circle" coords="273, 540, 12" onclick="mark(this,6);return false;" alt="erreur 6"  href="#" />
          <area shape="rect" coords="79,149,176,173" onclick="mark(this,7);return false;" alt="erreur7" href="#"  />
         </map>
          <span id="cont"> 
          <img id="copie" src="pics/imageB.jpg" usemap="#mymap"  alt="copie" /><br/>  
     <span id="res"></span>
     </span>
     <img src="pics/croix.png" id="croix" class="croix" alt="erreur"/>
     </div>
    </body>
    </html>
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  10. #50
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Octobre 2009
    Messages
    394
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Octobre 2009
    Messages : 394
    Par défaut
    J'ai un problème avec les deux dernières versions...

    Je n'arrive pas à centrer les deux images, ainsi que le compteur (voir site)... :-/

    Ps : je trouvais pas mal le fait de pouvoir cocher aussi sur la première image...

  11. #51
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 661
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 76
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 661
    Billets dans le blog
    1
    Par défaut
    attention !
    les table ne sont pas fait pour la mise en page ...

    de plus j'ai rajouté des div ...
    et j'appende dans un des divs ...*
    si tu tiens a mettre un table, mets une seule cellule avec tout dedans
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  12. #52
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Octobre 2009
    Messages
    394
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Octobre 2009
    Messages : 394
    Par défaut
    Je vais garder l'ancienne version avec le choix sur les deux images, car avec cette version j'arrive à faire ma mise en page :-)

  13. #53
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 661
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 76
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 661
    Billets dans le blog
    1
    Par défaut
    Oui mais il reste toujours le souci du redimensionnement

    essaye ceci:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso 1851-1" />
    <title>Nouvelle page 1</title>
    <style type="text/css">
    .croix {
    display:none;
    }
    area{ cursor:default;}
    img{border:0; float:left;}
    #cont{position:absolute;
    }
    </style>
    <script type="text/javascript">
    //<![CDATA[
    var found=[];
    function init(){
    //erreurs a trouver  ;
    var areas=document.getElementById('mymap').getElementsByTagName('area')
    var areasL=areas.length
    var i=-1;
    while(++i<areasL){
    areas[i].alt="";
    areas[i].href="";
    found.push(false);}
    document.getElementById('copie').alt="";
    }
     
    //ajout de croix
    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ération des coordonnées d'origine de l'image
    originX=+document.getElementById('copie').offsetLeft;
    originY=+document.getElementById('copie').offsetTop;
     
    //clonage de la croix
    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 croix 
    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
    }
     
    //attribution des top et left 
    trouve.style.top=crossX+"px";
    trouve.style.left=crossY+"px";
    trouve.style.visibility="visible"
     
    //ajout d'une erreur trouvée 
    found[errnr-1]=true
    var solde=0
    for(i=0;i<found.length;i++){
     (!found[i]) && solde++;
     }
    //affichage du solde
    mess=(solde>0)?'Il reste '+solde+' erreur(s)': 'Bravo !'
    document.getElementById('res').innerHTML=mess
     
    }
    //]]>
    </script>
    </head>
    <body onload='init()'>
    <div align="center">
      <p><img src="pics/croix.png" id="croix" class="croix"/>   </p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <h2>Clique sur l'image  ; trouves toutes les erreurs et tu auras gagn&eacute;.</h2>
      <p><img id="modele" src="pics/imageA.jpg" usemap="#mymap" />
        <map name="mymap" id="mymap"> 
     
          <area shape="circle" coords="21, 379, 12" onClick="mark(this,1);return false;">
          <area shape="circle" coords="371, 494, 12" onClick="mark(this,2);return false;">
          <area shape="circle" coords="294, 191, 12" onClick="mark(this,3);return false;">
          <area shape="circle" coords="130, 125, 12" onClick="mark(this,4);return false;">
          <area shape="circle" coords="116, 216, 12" onClick="mark(this,5);return false;">
          <area shape="circle" coords="273, 540, 12" onClick="mark(this,6);return false;">
          <area shape="rect" coords="79,149,176,173" onClick="mark(this,7);return false;">
        </map>
        <span id="cont">
        <img src="pics/imageB.jpg" name="copie" usemap="#mymap" id="copie" />
        </span></p>
      <table width="602" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td height="20"><div align="center"><span id="res"></span></div></td>
        </tr>
      </table>
    </div>
    <table  width="100%" height="442" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td class="td" width="100%" height="80">&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  14. #54
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Octobre 2009
    Messages
    394
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Octobre 2009
    Messages : 394
    Par défaut
    En prenant le code juste au dessus,

    • Les images ne sont pas alignées (une à gauche et une à droite)
    • Le compteur se retrouve au milieu des deux...?


    Ce qui me faudrait, c'est les deux images au centre, séparées simplement par une fine ligne. (voir site)

    Oui mais il reste toujours le souci du redimensionnement
    Je ne vois pas de quoi tu parles, je trouve ce que tu m'as fait, super ?

  15. #55
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 661
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 76
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 661
    Billets dans le blog
    1
    Par défaut
    si ta fenetre n'est pas en taille maximale ...
    clique sur une erreur , un croix apparait au bon endroit

    redimensionne ta fenetre ...



    il suffit de rajouter un span id="cont" autour de l'image "copie"
    et d'appender dans ce span ...

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="description" content="LIGUE BELGE DE LA SCLEROSE EN PLAQUES ASBL - Communautée Française" /> 
    <meta name="keywords" content="ligue belge, sclerose en plaques, asbl, sep-pas-sorcier" />
    <title>Jeu des 7 erreurs | SEP | 081/40.15.55|</title>
    <style type="text/css">
    body {
    	background-color: #FFFFFF;
    	background-image: url(background.jpg);
    	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;}
    </style>
    <script type="text/javascript">
    //<![CDATA[
    var found=[];
    function init(){
    //erreurs a trouver  ;
    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="none";
    found.push(false);}
    document.getElementById('copie').alt="";
    }
     
    //ajout de croix
    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ération des coordonnées d'origine de l'image
    originX=+document.getElementById('copie').offsetLeft;
    originY=+document.getElementById('copie').offsetTop;
     
    //clonage de la croix
    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 croix 
    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
    }
     
    //attribution des top et left 
    trouve.style.top=crossX+"px";
    trouve.style.left=crossY+"px";
    trouve.style.visibility="visible"
     
    //ajout d'une erreur trouvée 
    found[errnr-1]=true
    var solde=0
    for(i=0;i<found.length;i++){
     (!found[i]) && solde++;
     }
    //affichage du solde
    mess=(solde>0)?'Il reste '+solde+' erreur(s)': 'Bravo !'
    document.getElementById('res').innerHTML=mess
     
    }
    //]]>
     
    </script>
    <!-- GOOGLE ANALYTIC -->
    <link href="style.css" rel="stylesheet" type="text/css"/>
    </head>
    <body onload='init()'>
    <div align="center">
      <p><img src="pics/croix.png" id="croix" class="croix"/>   </p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <h2>Cliques sur l'image  ; trouves toutes les erreurs et tu auras gagn&eacute;.</h2>
      <p><img id="modele" src="pics/imageA.jpg" usemap="#mymap" />
        <map name="mymap" id="mymap"> 
     
          <area shape="circle" coords="21, 379, 12" onClick="mark(this,1);return false;">
          <area shape="circle" coords="371, 494, 12" onClick="mark(this,2);return false;">
          <area shape="circle" coords="294, 191, 12" onClick="mark(this,3);return false;">
          <area shape="circle" coords="130, 125, 12" onClick="mark(this,4);return false;">
          <area shape="circle" coords="116, 216, 12" onClick="mark(this,5);return false;">
          <area shape="circle" coords="273, 540, 12" onClick="mark(this,6);return false;">
          <area shape="rect" coords="79,149,176,173" onClick="mark(this,7);return false;">
        </map>
        <span id="cont"><img src="pics/imageB.jpg" name="copie" usemap="#mymap" id="copie" /></span></p>
      <table width="602" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td height="20"><div align="center"><span id="res"></span></div></td>
        </tr>
      </table>
    </div>
    <table  width="100%" height="442" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td class="td" width="100%" height="80">&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  16. #56
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Octobre 2009
    Messages
    394
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Octobre 2009
    Messages : 394
    Par défaut
    Ok,

    Est-ce normal que la souris disparaisse au survol d'un area ?

  17. #57
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 661
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 76
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 661
    Billets dans le blog
    1
    Par défaut
    Non j'ai du modifier le css cursor ...
    remets le a default

    ha ben non
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    areas[i].style.cursor="none";
    voilà le responsable

    =>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    areas[i].style.cursor="default";
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  18. #58
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Octobre 2009
    Messages
    394
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Octobre 2009
    Messages : 394
    Par défaut
    Juste...

    Il reste cependant un problème chez moi avec ton dernier code. Au niveau du centrage des deux images, elles ne se placent pas au milieu, mais plutôt vers la droite ? Ce qui est super embêtant pour ma mise en page...

    Ps : Pour le moment se trouve sur le site, l'ancienne version du code, normalement avec les problèmes de redimensionnement, mais je n'ai aucun problème chez moi et toi ?

    EDIT :

    Je viens de trouver, tu parles d'un redimensionnement pendant le jeu !, Alors, là, oui, il y a un problème avec les croix... Il faut donc, que je trouve comme centrer les deux images parfaitement.

  19. #59
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 661
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 76
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 661
    Billets dans le blog
    1
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="description" content="LIGUE BELGE DE LA SCLEROSE EN PLAQUES ASBL - Communautée Française" /> 
    <meta name="keywords" content="ligue belge, sclerose en plaques, asbl, sep-pas-sorcier" />
    <title>Jeu des 7 erreurs | SEP | 081/40.15.55|</title>
    <style type="text/css">
    body {
    	background-color: #FFFFFF;
    	background-image: url(background.jpg);
    	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:800px;
    	margin:auto;
    	}
    </style>
    <script type="text/javascript">
    //<![CDATA[
    var found=[];
    function init(){
    //erreurs a trouver  ;
    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="";
    }
     
    //ajout de croix
    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ération des coordonnées d'origine de l'image
    originX=+document.getElementById('copie').offsetLeft;
    originY=+document.getElementById('copie').offsetTop;
     
    //clonage de la croix
    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 croix 
    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
    }
     
    //attribution des top et left 
    trouve.style.top=crossX+"px";
    trouve.style.left=crossY+"px";
    trouve.style.visibility="visible"
     
    //ajout d'une erreur trouvée 
    found[errnr-1]=true
    var solde=0
    for(i=0;i<found.length;i++){
     (!found[i]) && solde++;
     }
    //affichage du solde
    mess=(solde>0)?'Il reste '+solde+' erreur(s)': 'Bravo !'
    document.getElementById('res').innerHTML=mess
     
    }
    //]]>
     
    </script>
    <!-- GOOGLE ANALYTIC -->
    <link href="style.css" rel="stylesheet" type="text/css"/>
    </head>
    <body onload='init()'>
    <div id="main">
      <p><img src="pics/croix.png" id="croix" class="croix"/>   </p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <h2>Clique sur l'image  ; trouve toutes les erreurs et tu auras gagn&eacute;.</h2>
      <p><img id="modele" src="pics/imageA.jpg" usemap="#mymap" />
        <map name="mymap" id="mymap"> 
     
          <area shape="circle" coords="21, 379, 12" onClick="mark(this,1);return false;">
          <area shape="circle" coords="371, 494, 12" onClick="mark(this,2);return false;">
          <area shape="circle" coords="294, 191, 12" onClick="mark(this,3);return false;">
          <area shape="circle" coords="130, 125, 12" onClick="mark(this,4);return false;">
          <area shape="circle" coords="116, 216, 12" onClick="mark(this,5);return false;">
          <area shape="circle" coords="273, 540, 12" onClick="mark(this,6);return false;">
          <area shape="rect" coords="79,149,176,173" onClick="mark(this,7);return false;">
        </map>
        <span id="cont"><img src="pics/imageB.jpg" name="copie" usemap="#mymap" id="copie" /></span></p>
      <table width="602" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td height="20"><div align="center"><span id="res"></span></div></td>
        </tr>
      </table>
    </div>
    <table  width="100%" height="442" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td class="td" width="100%" height="80">&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>
    (l'impératif => pas de s )
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  20. #60
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Octobre 2009
    Messages
    394
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Octobre 2009
    Messages : 394
    Par défaut
    Yes :-)

    Encore merci, trop fort

+ Répondre à la discussion
Cette discussion est résolue.
Page 3 sur 4 PremièrePremière 1234 DernièreDernière

Discussions similaires

  1. Réponses: 17
    Dernier message: 17/06/2012, 13h17
  2. script pour jeu des 7 erreurs
    Par pamglobe dans le forum Flash
    Réponses: 5
    Dernier message: 28/08/2010, 13h56
  3. Réponses: 2
    Dernier message: 15/11/2005, 10h59
  4. [algo et C] Jeu des dés en C
    Par bosz28 dans le forum C
    Réponses: 10
    Dernier message: 12/10/2005, 11h48

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo