Cercle d'images dans une page

**barthoose** · 01/03/2009, 23h46

Bonjour à tous,

je cerche à faire un cercle d'images. Le survol d'une de ces images entraine la mise à jour d'un div central :

Pour un début, je me suis concentré sur 4 images aux 4 coins du div qui représente ce "cercle de cercles". Le résultat est satisfaisant sous IE7, mais pas sous Firefox... j'en déduis que je me débrouille mal...

Voici ce que j'ai fait (les divs 2img1 et 2img2 sont certainement inutiles, mais ils me servent à ce que les images du haut et du bas ne flottent pas ensemble) :

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
 
<html>
<head>
	<style>
.centre{
	background:red no-repeat scroll center center;
	width:600px;
	height:195px;
	border: 3px solid #00ff7f;
	top: 220px;
	left: 50px;
}
#img{
border: 3px solid black;
width:640 px;
height:600 px;
margin-left : 100px;
margin-top : 100px;
}
#2img1{
border:1px solid blue;
float:top;
height=10px;
}
#2img2{
border:1px solid blue;
float:bottom;
height=10px;
}
#img1{
float:left;
}
#img2{
float:right;
}
#img3{
float:left;
margin-top : 15%;
}
#img4{
float:right;
margin-top : 15%;
}
 
	</style>
	<script>
		function affiche(id_div)
		{
			var div = document.getElementById(id_div);
			var div_vide = document.getElementById('centre_vide');
			div.style.display = "";
			div_vide.style.display = "none";
		}
		function cache(id_div)
		{
			var div = document.getElementById(id_div);
			var div_vide = document.getElementById('centre_vide');
		 	div.style.display = "none";
			div_vide.style.display = "";
		}
	</script>
 
</head>
<html>
<div id="img">
	<div id="2img1">
		<div id="img1">
		<a href="#" onmouseover="affiche('menu1');" onmouseout="cache('menu1');"><img src="img/salondethe.jpg" border="0" width="200" height="200" /></a><br>
		</div>
		<div id="img2">
		<a href="#" onmouseover="affiche('menu2');" onmouseout="cache('menu2');"><img src="img/cadeaux.jpg" border="0" width="150" height="200" /></a><br>
		</div>
	</div>
	<div id="centre_vide" class="centre" >
	vide
</div>
<div id="menu1" class="centre" style="display:none">
Détail salon de thé
</div>
<div id="menu2" class="centre" style="display:none">
Détail cadeaux
</div>
<div id="menu3" class="centre" style="display:none">
Détail artisanat
</div>
<div id="menu4" class="centre" style="display:none">
Détail restaurant
</div>
	<div id="2img2">
	<div id="img3">
	<a href="#" onmouseover="affiche('menu3');" onmouseout="cache('menu3');"><img src="img/artisanat.jpg" border="0" width="119" height="197" /></a><br>
	</div>
	<div id="img4">
	<a href="#" onmouseover="affiche('menu4');" onmouseout="cache('menu4');"><img src="img/restauration.jpg" border="0" width="150" height="200" /></a><br>
	</div>
	</div>
</div>
<p> </p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
</html>

Qu'est ce qui ne va pas dans ce que j'ai fait, me conseillerez vous de m'y prendre autrement ?
Merci d'avance

**desert** · 02/03/2009, 14h15

Tu as plusieurs problèmes :
- Pas de doctype. Sans doctype, ca va être difficile d'établir un comportement standart.
- Pas de balise body.
- Deux balises html au lieu d'une.
- Essaie de donner l'attribut type à tes balises style et script.

Code xhtml :

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

1
2
<style type="text/css"></style>
<script type="text/javascript"></script>

- Erreur de sytaxe dans ton css au niveau de la propriété height. Le caractère de séparation entre le nom de la propriété et sa valeur est ":" et non "=".

Code css :

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

height : 10px;

Corrige donc ces différentes choses, peut-être que ton problème se résoudra de lui-même.

**Macmillenium** · 02/03/2009, 14h39

Envoyé par desert

Tu as plusieurs problèmes :
- Pas de doctype. Sans doctype, ca va être difficile d'établir un comportement standart.
- Pas de balise body.
- Deux balises html au lieu d'une.
- Essaie de donner l'attribut type à tes balises style et script.

Code xhtml :

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

1
2
<style type="text/css"></style>
<script type="text/javascript"></script>

- Erreur de sytaxe dans ton css au niveau de la propriété height. Le caractère de séparation entre le nom de la propriété et sa valeur est ":" et non "=".

Code css :

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