Border-style dans une galerie photo

**Badiha** · 16/01/2009, 22h08

Bonsoir à tous,

Je suis en train de créer une galerie photo toute simple et j'aimerais inclure un border de façon à ce que dès que l'on clique sur la photo, un contour s'affiche pour signifier sur quelle photo nous sommes.

J'ai un souci, sous Mozilla le border s'affiche mal. (Uniquement en bas des photos et légérement sur les côtés.) Il doit y avoir une erreur quelque part mais où??

D'avance merci

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<STYLE type="text/css">
		.img_selected {
	border-style: solid;
	border-color: #FF0000;
    }
 
 
</STYLE>
<title>Document sans nom</title>
 
<script type="text/javascript" language="javascript">
var img_current = null;
 
function showPic (whichpic) {
  if (whichpic.className != 'img_selected')
  {
    if (img_current != null)
      img_current.className = '';
    img_current = whichpic;
    img_current.className = 'img_selected';
  }
 
	if (document.getElementById) {
		document.getElementById('placeholder').src = whichpic.href; 
		if (whichpic.title) { 
			document.getElementById('desc').childNodes[0].nodeValue = whichpic.title; 
		} else { 
			document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue; 
		} 
		return false; 
	} else { 
		return true; 
	} 
}
</script>
 
 
<style type="text/css">
<!--
body {
	background-color: #D2C9DC;
}
-->
</style></head>
 
<body>
<div style="border: 1px solid #999; padding: 1em; margin: 0 0 15px 0;">
 
<li><a onclick="return showPic(this)" href="images/manoir2.jpg" title="Manoir à Saint Chamond"><img src="images/manoir1.jpg" width="107" height="80" border="0" /></a>
<a onclick="return showPic(this)" href="images/IMG_0038.JPG" title="Cousine dans la nature"><img src="images/IMG_0038_1.JPG" width="107" height="80" border="0" /></a>
<a onclick="return showPic(this)" href="images/IMG_0044.jpg" title="Ruines en pleine campagne"><img src="images/IMG_0044_01.jpg" width="107" height="80" border="0" /></a>
<a onclick="return showPic(this)" href="images/IMG_0051.jpg" title="Adolescents dubitatifs"><img src="images/IMG_0051_01.jpg" width="107" height="80" border="0" /></a>
<a onclick="return showPic(this)" href="images/IMG_0057.jpg" title="Vieille voiture abandonnée"><img src="images/IMG_0057_01.jpg" width="107" height="80" border="0" /></a>
<a onclick="return showPic(this)" href="images/IMG_0517.jpg" title="Paysage alpin"><img src="images/IMG_0517_01.jpg" width="107" height="80" border="0" /></a></li>
<li><a onclick="return showPic(this)" href="images/IMG_0538.jpg" title="Paysage alpin 2"><img src="images/IMG_0538_01.jpg" width="107" height="80" border="0" /></a>
<a onclick="return showPic(this)" href="images/IMG_0660.jpg" title="Cour intérieure"><img src="images/IMG_0660_01.jpg" width="107" height="80" border="0" /></a>
<a onclick="return showPic(this)" href="images/IMG_3032.jpg" title="Champ de blé"><img src="images/IMG_3032_01.jpg" width="107" height="80" border="0" /></a>
<a onclick="return showPic(this)" href="images/IMG_3033.jpg" title="Champ de blé vue plongeante"><img src="images/IMG_3033_01.jpg" width="107" height="80" border="0" /></a>
<a onclick="return showPic(this)" href="images/IMG_3035.jpg" title="Champ de blé vue plongeante"><img src="images/IMG_3035_01.jpg" width="107" height="80" border="0" /></a>
<a onclick="return showPic(this)" href="images/IMG_3036.jpg" title="Vue entre les buissons"><img src="images/IMG_3036_01.jpg" width="107" height="80" border="0" /></a></li>
 
<p id="desc">Choose an image to begin</p>
<div align="center"><img id="placeholder" src="/d/imagegallery/blank.gif" alt="" />
</div>
</div>
</body>
</html>