Jeu des 7 erreurs

Version imprimable

Voir 40 message(s) de cette discussion en une page

Citation:

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:

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. 8O

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:

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 ;)

06/06/2012, 12h08
CrasherSEP

Merci , je test :ccool:

Heeeee, charset ? :oops:
06/06/2012, 12h33
SpaceFrog

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:

<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 ...
06/06/2012, 13h04
CrasherSEP

Au sujet de :

Code:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

&

Code:

<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... :-)
06/06/2012, 13h09
SpaceFrog

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/
06/06/2012, 13h14
SpaceFrog

juste un dernier souci de position de croix lors d'un redim de la page
je corrige...

Essaye ceci

Code:

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>

Avec deux ou trois petite corrections:

Code:

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>

06/06/2012, 14h04
CrasherSEP

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...
06/06/2012, 14h10
SpaceFrog

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
06/06/2012, 14h31
CrasherSEP

Je vais garder l'ancienne version avec le choix sur les deux images, car avec cette version j'arrive à faire ma mise en page :-)

Oui mais il reste toujours le souci du redimensionnement

essaye ceci:

Code:

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>

06/06/2012, 15h29
CrasherSEP
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)

Citation:

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 ? :oops:

si ta fenetre n'est pas en taille maximale ...
clique sur une erreur , un croix apparait au bon endroit

redimensionne ta fenetre ... :cry:

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

Code:

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>

06/06/2012, 16h03
CrasherSEP

Ok,

Est-ce normal que la souris disparaisse au survol d'un area ?
06/06/2012, 16h05
SpaceFrog
Non j'ai du modifier le css cursor ...
remets le a default

ha ben non
Code:

1 2 areas[i].style.cursor="none";
voilà le responsable

=>

Code:

areas[i].style.cursor="default";
06/06/2012, 16h12
CrasherSEP

Juste... :ccool:

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.

Code:

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 )

06/06/2012, 16h23
CrasherSEP

Yes :-)

Encore merci, trop fort :ccool:

Voir 40 message(s) de cette discussion en une page