comportement avec IE6 - Rollover ?

**niaxon** · 11/01/2008, 15h56

Bonjour.

J' ai fait une page en html simple.
Les images changent au survol de la souris. Pour cela j utilise la technique dites des " porte coulissante ". ( c est a dire que les 2 images ne forment en realité qu une seul et meme image, on decale juste ce qu on veut montrer avec "background-position" )
Ma page fonctionne correctement sous Firefox et IE7 mais le rollover ne fonctionne pas du tout sur IE6.
http://niaxon.free.fr/arccos/test.html

Si quelqu' un aurait une idée du pourquoi...merci d avance.

Voici le code:

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
 
<style>
body{
	background-image:url(img/etape2.png);
	background-repeat:no-repeat;
	background-position:top center;
	}
#apDiv1 {
	position:absolute;
	left:269px;
	top:396px;
	width:200px;
	height:200px;
	z-index:1;
	background:url(img/travaux.png) no-repeat;
}
#apDiv2 {
	position:absolute;
	left:350px;
	top:276px;
	width:459px;
	height:109px;
	z-index:5;
	background:url(img/link1test.png) no-repeat;
}
#apDiv2:hover{
	background-position: -459px 0%;
}
#apDiv3 {
	position:absolute;
	left:480px;
	top:349px;
	width:459px;
	height:109px;
	z-index:4;
	background:url(img/link2test.png) no-repeat;
}
#apDiv4 {
	width:440px;
	height:109px;
	z-index:5;
	background:url(img/link3test.png) no-repeat;
}
#apDiv4:hover{
	background-position: -445px 0%;
}
#apDiv5 {
	position:absolute;
	left:545px;
	top:428px;
	width:468px;
	height:150px;
	z-index:10;
	background:url(img/link4test.png) no-repeat;
}
#apDiv5:hover{
	background-position: -468px 0%;
}
#apDiv6 {
	position:absolute;
	left:478px;
	top:566px;
	width:340px;
	height:40px;
	z-index:2;
	background:url(img/link5test.png) no-repeat;
}
a:hover{cursor:pointer;}
#apDiv7 {
	position:absolute;
	left:362px;
	top:602px;
	width:440px;
	height:109px;
	z-index:11;
	background:url(img/link3test.png) no-repeat;
}
#apDiv7:hover{
	background-position: -445px 0%;
}
</style>

html:

Code :

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

1
2
3
4
5
6
7
8
9
 
<body>
    <div id="apDiv1"></div>
    <div id="apDiv2"></div>
    <div id="apDiv7"></div>
<a href="Calendrier_general_1er_semestre_2008_ARCCOS.pdf"><div id="apDiv3"></div></a>
    <div id="apDiv5"></div>
    <div id="apDiv6"></div>
</body>