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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 html : 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
<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 css : 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
@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; }