Une galerie image

Bonjour,

Je souhaite réaliser une galerie photo très simple.
Ce petit script fonctionne parfaitement sauf quand je clique sur le dernier onglet du menu, tout se déglingue !
Quelqu'un peut-il me dire ce qui ne va pas dans mon script ?
Merci infiniment par avance, je suis webdesigner et nulle en javascript malheureusement !

Voici le HTML et le CSS.

Code:

1
2
3
4
5
6
7
8
function showC(value){
	for(var x = 0;x<4;x++){
		var idc = document.getElementById("slide" + x);
		idc.style.display = 'none';
	}
	var idl = document.getElementById("slide" + value);
	idl.style.display = 'block';
}

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
<body>
	<section class="section">
		<div class="section_contenu">
			<div id="galerie">
 
				<figure id="slide0">
					<figcaption>
						<h4>couleur bleu</h4>
						<p>Duis aute irure dolor eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt 
						ut enim ad minim veniam, excepteur sint occaecat.</p>
					</figcaption>
					<img src="images/bleu.jpg" alt="">
				</figure>
 
				<figure id="slide1">
					<figcaption>
						<h4>couleur jaune</h4>
						<p>Cumque nihil impedit quo minus vel illum qui dolorem eum fugiat quo voluptas 
						nulla pariatur? Praesentium voluptatum deleniti magnam aliquam quaerat voluptatem.</p>
					</figcaption>
					<img src="images/jaune.jpg" alt="">
				</figure>
 
				<figure id="slide2">
					<figcaption>
						<h4>couleur vert</h4>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, 
						consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. </p>
					</figcaption>
					<img src="images/vert.jpg" alt="">
				</figure>
 
				<figure id="slide3">
					<figcaption>
						<h4>couleur rouge</h4>
						<p>Or bends with the remover to remove. Admit impediments; love is not love oh, no, 
						it is an ever fixed mark whose worth's unknown, although his height be taken.</p>
					</figcaption>
					<img src="images/rouge.jpg" alt="">
				</figure>
 
				<figure id="slide4">
					<figcaption>
						<h4>couleur violet</h4>
						<p>Vivamus ut sem. Fusce aliquam nunc vitae purus. Duis aute irure dolor eu fugiat nulla pariatur. 
						Sed do eiusmod tempor incididunt ut enim ad minim veniam.</p>
					</figcaption>
					<img src="images/violet.jpg" alt="">
				</figure>
			</div><!--FIN de #galerie-->
			<div class="cb"></div>
 
			<nav id="galerie_nav">
				<ul>
					<li><a value="0" onclick="showC(this.getAttribute('value'));">couleur<br>bleu</a></li>
					<li><a value="1" onclick="showC(this.getAttribute('value'));">couleur<br>jaune</a></li>
					<li><a value="2" onclick="showC(this.getAttribute('value'));">couleur<br>vert</a></li>
					<li><a value="3" onclick="showC(this.getAttribute('value'));">couleur<br>rouge</a></li>
					<li><a value="4" onclick="showC(this.getAttribute('value'));">couleur<br>violet</a></li>
				</ul>
			</nav>
		</div><!--FIN de .section_contenu-->
	</section>
</body>

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
@charset "UTF-8";
 
html, body, h4, ul, li,
figure, figcaption, nav, section {
	margin: 0; padding: 0;}
 
a { text-decoration: none; }
ul { list-style: none; }
img { border: 0; }
.cb{ clear:both; }
 
.section_contenu {
	width: 968px;
	margin: 50px auto 0;
}
 
#galerie figure img {
	display: block;
	float: right;
}
#galerie figure figcaption {
	width:300px;
	height: 100px;
	float: left;
}
 
#galerie figure figcaption h4 { font-size: 2.5em; }
 
#slide0 { display:block; }
 
#slide1, #slide2, #slide3, #slide4 { display:none; }
 
/*navigation*/
#galerie_nav {
	width: 700px;
	margin: 30px auto;
}
#galerie_nav ul li {
	width: 136px;
	display: inline-block;
	text-align: center;
	font-size: 1.4em;
}
#galerie_nav ul li a { cursor: pointer; }
#galerie_nav ul li a:hover { color: red; }

Citation:

tout se déglingue !

Et....8O8O8O8O8O8O8O8O

ça signifie quoi ?

A+JYT

Merci d'avoir répondu aussi vite à mon message,
c'est une expression pour dire que ça ne fonctionne plus. C'est sans doute une expression de ma région...
En fait qu'en je clique sur le dernier onglet de la liste, deux images apparaissent l'une au-dessus de l'autre.
C'est pas simple à expliquer. Vous est-il possible de tester avec les fichiers HTML et CSS joint à mon message ?

les éléments HTML figure et figcaption sont du HTML5 sont-il supporté par votre navigateur ?
A+JYT

oui, oui sans problème, ce qui pose problème c'est le bout de code javascript,
pouvez-vous le regarder et me dire si le script est correct ?

Oui ça veut dire quoi précisément tout ce déglingue ???
car a priori je ne vois pas de pb de JS
A+JYT

bonjour,
Vous l'avez testé ?

Vous avez crée 5 éléments numérotés de 0 à 4. Hors la boucle qui masque les div va de 0 à 3. Le dernier n'est pas masqué.
Changez la limite supérieure de la boucle :

Code:

for(var x = 0;x<5;x++)

au lieu de

Code:

for(var x = 0;x<4;x++)

Merci infiniment Chanyslas. ÇA MARCHE ! génial.

je conclus donc que déglingué signifiait que le 5emme élément restait affiché.
il suffisait de le dire

A+JYT

Non, il suffisait de lire ce qu'elle avait écrit dans les petites cases :aie: