Cercle d'images dans une page
Bonjour à tous,
je cerche à faire un cercle d'images. Le survol d'une de ces images entraine la mise à jour d'un div central :
http://www.nicoco.free.fr/public/principe.jpg
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:
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
