problème avec des couches de balises div

**pierre68314** · 06/03/2006, 00h40

bonjour à tous,

je veux faire un jeu du style le memory

il y a trois choix possibles 6, 12 et 24 cartes

apres avoir choisi, un tableau apparait avec le nombre de cases.

en réalité c'est une balise div qui devient visible.
bref, en cliquant sur l'image, une image apparait a la place.

PB:quelque soit la div visible, lorsque je clique sur la premiere première case (en haut à gauche), celle qui s'active est celle de la div à 6 cartes (lapremière div)
je pense que cela vient du fait que mes div se chevauchent et que je n'arrive pas à en faire passer une au dessus des autres

bref ce n'est pas clair du tout ça...

voilà le code, testez le, vous comprendrez vite le pb.

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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>memory</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<style type="text/css">
div {
	 position:absolute;
	 top:200px;
	 left:50%;
	 margin-left:-186px;
	 width:372px;
	 }
</style>
 
<script language="javascript">
<!--
function initialisation(carte)
{
	//initialisation des variables, possibilité de changer de jeu en cour
	vide = "./images/vide.png"
	document.getElementById("div6").style.visibility="hidden";
	document.getElementById("div6").style.zIndex=-1;
 
	document.getElementById("div12").style.visibility="hidden";
	document.getElementById("div12").style.zIndex=-1;
 
	document.getElementById("div24").style.visibility="hidden";
	document.getElementById("div24").style.zIndex=-1;
 
	document.getElementById('div'+carte).style.visibility="visible";
	document.getElementById('div'+carte).style.zIndex=1;
 
	//permettra de savoir si une 1ere carte a déjà ete retournée
	retourne=0;
 
	//initialise le tableau de correction pour savoir si les cartes ont été retournées
	correction=new Array;
	for(i=0;i<carte;i++) { correction[i]=0; }
 
	//mélange les cartes
	melange(carte);
}
 
tab = new Array(1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12);
 
function melange(carte)
{
	for(i=0;i<300;i++)
	{
	valeur1=Math.round((carte-1)*Math.random());
	valeur2=Math.round((carte-1)*Math.random());
	temp=tab[valeur1];
	tab[valeur1]=tab[valeur2];
	tab[valeur2]=temp;
	}
}
 
function retourner(nb)
{
retourne=!retourne;
document.getElementById(nb).src='./images/'+nb+'.png';
}
 
//-->
</script>
</head>
 
<body>
  <p align="center">Jeu de m&eacute;moire</p>
  <form name="form1" method="post" action="">
    <p align="center">Choisissez la difficult&eacute; 
    <table align="center" width="110">
      <tr>
        <td width="27"><input type="radio" name="Groupe de boutons radio1" value="6" onClick="initialisation('6');"></td>
        <td width="177"><label>
          6 cartes</label></td>
      </tr>
      <tr>
        <td><input type="radio" name="Groupe de boutons radio1" value="12" onClick="initialisation('12');"></td>
        <td><label>
          12 cartes</label></td>
      </tr>
      <tr>
        <td><input type="radio" name="Groupe de boutons radio1" value="24" onClick="initialisation('24');"></td>
        <td><label>
          24 cartes</label></td>
      </tr>
    </table>
  </form></p>
 
<div id="div6" style="visibility:hidden "><table width="372"  border="1" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td><img id="0" src="images/VIDE.png" width="60" height="57" onClick="retourner('0')"></td>
    <td><img id="1" src="images/VIDE.png" width="60" height="57" onClick="retourner('1')"></td>
    <td><img id="2" src="images/VIDE.png" width="60" height="57" onClick="retourner('2')"></td>
    <td><img id="3" src="images/VIDE.png" width="60" height="57" onClick="retourner('3')"></td>
    <td><img id="4" src="images/VIDE.png" width="60" height="57" onClick="retourner('4')"></td>
    <td><img id="5" src="images/VIDE.png" width="60" height="57" onClick="retourner('5')"></td>
  </tr>
</table>
</div>
 
<div id="div12" style="visibility: hidden "><table width="372"  border="1" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td><img id="0" src="images/VIDE.png" width="60" height="57" onClick="retourner('0')"></td>
    <td><img id="1" src="images/VIDE.png" width="60" height="57" onClick="retourner('1')"></td>
    <td><img id="2" src="images/VIDE.png" width="60" height="57" onClick="retourner('2')"></td>
    <td><img id="3" src="images/VIDE.png" width="60" height="57" onClick="retourner('3')"></td>
    <td><img id="4" src="images/VIDE.png" width="60" height="57" onClick="retourner('4')"></td>
    <td><img id="5" src="images/VIDE.png" width="60" height="57" onClick="retourner('5')"></td>
  </tr>
  <tr>
    <td><img id="6" src="images/VIDE.png" width="60" height="57" onClick="retourner('6')"></td>
    <td><img id="7" src="images/VIDE.png" width="60" height="57" onClick="retourner('7')"></td>
    <td><img id="8" src="images/VIDE.png" width="60" height="57" onClick="retourner('8')"></td>
    <td><img id="9" src="images/VIDE.png" width="60" height="57" onClick="retourner('9')"></td>
    <td><img id="10" src="images/VIDE.png" width="60" height="57" onClick="retourner('10')"></td>
    <td><img id="11" src="images/VIDE.png" width="60" height="57" onClick="retourner('11')"></td>
  </tr>
</table>
</div>
 
<div id="div24" style="visibility:hidden "><table width="372"  border="1" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td><img id="0" src="images/VIDE.png" width="60" height="57" onClick="retourner('0')"></td>
    <td><img id="1" src="images/VIDE.png" width="60" height="57" onClick="retourner('1')"></td>
    <td><img id="2" src="images/VIDE.png" width="60" height="57" onClick="retourner('2')"></td>
    <td><img id="3" src="images/VIDE.png" width="60" height="57" onClick="retourner('3')"></td>
    <td><img id="4" src="images/VIDE.png" width="60" height="57" onClick="retourner('4')"></td>
    <td><img id="5" src="images/VIDE.png" width="60" height="57" onClick="retourner('5')"></td>
  </tr>
  <tr>
    <td><img id="6" src="images/VIDE.png" width="60" height="57" onClick="retourner('6')"></td>
    <td><img id="7" src="images/VIDE.png" width="60" height="57" onClick="retourner('7')"></td>
    <td><img id="8" src="images/VIDE.png" width="60" height="57" onClick="retourner('8')"></td>
    <td><img id="9" src="images/VIDE.png" width="60" height="57" onClick="retourner('9')"></td>
    <td><img id="10" src="images/VIDE.png" width="60" height="57" onClick="retourner('10')"></td>
    <td><img id="11" src="images/VIDE.png" width="60" height="57" onClick="retourner('11')"></td>
  </tr>
  <tr>
    <td><img id="12" src="images/VIDE.png" width="60" height="57" onClick="retourner('12')"></td>
    <td><img id="13" src="images/VIDE.png" width="60" height="57" onClick="retourner('13')"></td>
    <td><img id="14" src="images/VIDE.png" width="60" height="57" onClick="retourner('14')"></td>
    <td><img id="15" src="images/VIDE.png" width="60" height="57" onClick="retourner('15')"></td>
    <td><img id="16" src="images/VIDE.png" width="60" height="57" onClick="retourner('16')"></td>
    <td><img id="17" src="images/VIDE.png" width="60" height="57" onClick="retourner('17')"></td>
  </tr>
  <tr>
    <td><img id="18" src="images/VIDE.png" width="60" height="57" onClick="retourner('18')"></td>
    <td><img id="19" src="images/VIDE.png" width="60" height="57" onClick="retourner('19')"></td>
    <td><img id="20" src="images/VIDE.png" width="60" height="57" onClick="retourner('20')"></td>
    <td><img id="21" src="images/VIDE.png" width="60" height="57" onClick="retourner('21')"></td>
    <td><img id="22" src="images/VIDE.png" width="60" height="57" onClick="retourner('22')"></td>
    <td><img id="23" src="images/VIDE.png" width="60" height="57" onClick="retourner('23')"></td>
  </tr>
</table>
</div>
 
 
</body>
</html>

merci d'avance

**ashurai** · 06/03/2006, 16h29

En fait, je ne comprend pas trés vite le problème car je n'ai pas les images, ca aide pas

**Matthieu2000** · 06/03/2006, 16h39

tes id ne sont pas uniques.

document.getElementById(nb)

renvoie le premier trouvé, celui du calque 6...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
function retournerImage(imgSrc) 
{ 
retourne=!retourne; 
imgSrc.src='./images/'+nb+'.png'; 
} 
 
 
<td><img  src="images/VIDE.png" width="60" height="57" onClick="retournerImage(this)"></td>

**pierre68314** · 06/03/2006, 16h45

exact, j'ai donné des id unique et le tour est joué merci

problème avec des couches de balises div

JavaScript

Discussions similaires

Partager

Partager