Bonjour à tous,

Je cherche à construire une page ayant des comportements au survol d'images en utilisant uniquement du CSS.

Je commence à obtenir le comportement que je veux sauf sur IE6 (évidement...)

J'essaye d'afficher une image lorsqu'on en survole une autre dans un élément <a> et de la faire disparaitre quand on arrête le survol.

Sur IE6 l'image apparait mais reste présente à l'écran lorsqu'on quitte le survol de l'élément <a>

Voici le HTML

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
<!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" />
<meta name="keywords" content="">
<meta name="description" content="">
<title>Christina Sports Reservez Pack, Ski, Snowboard, Chaussures de ski, Boots...</title>
 
<link type="text/css" href="css/main.css" rel="Stylesheet" />
 
</head>
 
<body>
<img id="img_christina" src="images/christina-sports.gif"/>
<a class="info_bulle" href="#"><img class="btnAccueil" id="location_btn" src="images/location-ski-snowboard.jpg"/><span><img class="txtAccueil" id="location_txt" src="images/txtLocation.gif"/></span></a>
<a class="info_bulle" href="#"><img class="btnAccueil" id="matos_btn" src="images/vente-ski-snowboard-materiel.jpg"/><span><img class="txtAccueil" id="matos_txt" src="images/txtEquipement.gif"/></span></a>
<a class="info_bulle" href="#"><img class="btnAccueil" id="sportswear_btn" src="images/vente-sportswear.jpg"/><span><img class="txtAccueil" id="sportswear_txt" src="images/txtVente.gif"/></span></a>
<a class="info_bulle" href="#"><img class="btnAccueil" id="magasin_btn" src="images/christina-sports-magasin.jpg"/><span><img class="txtAccueil" id="magasin_txt" src="images/txtMagasin.gif"/></span></a>
 </body>
 </html>
et le CSS

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
 
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#ABAAAB;
background-image:url(../../images/fond.gif);
background-repeat:repeat-x;
background-position: top left;
margin:0px;
margin-top:10px;
overflow:hidden;
}
 
#img_christina{
z-index:1;
position:absolute;
left:50%;
top:40%;
margin-left:-375px;
margin-top:-275px;
}
 
.btnAccueil{
position:absolute;
left:50%;
top:40%;
margin-top:150px;
border:#FFFFFF 2px solid;
cursor:pointer;
}
 
.txtAccueil{
position:absolute;
left:50%;
top:35%;
margin-top:120px;
cursor:pointer;
 
}
 
span{
display:none;
}
 
a.info_bulle:hover{
border:0;
}
 
a.info_bulle:hover span, a.info_bulle:focus span{
display:inline;
} 
 
#magasin_txt {
margin-left:150px;
z-index:5;
border:0;
}
 
#sportswear_txt{
margin-left:0px;
z-index:4;
border:0;
}
 
#matos_txt{
margin-left:-240px;
z-index:3;
border:0;
}
 
#location_txt{
margin-left:-355px;
z-index:2;
border:0;
}
 
 
#magasin_btn {
margin-left:180px;
z-index:5;
}
 
#sportswear_btn{
margin-left:-15px;
z-index:4;
}
 
#matos_btn{
margin-left:-185px;
z-index:3;
}
 
#location_btn{
margin-left:-355px;
z-index:2;
}
Quelqu'un a-t-il une idée du pourquoi ?

Merci d'avance pour vos réponses