Onmouseover et IE

Bonjour, je suis en train de faire un site et j'ai fait un menu avec du javascript.
Le menu fonctionne correctement avec firefox mais sous IE il ne répond pas du tout.
je vous laisse voir le résultat espéré sous firefox et le bug sous IE :http://lordsofkahuzan.free.fr

mon code html :

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
   1.
      <div id="menu">
   2.
 
   3.
                      <div class="element_menu">
   4.
                              <dl>
   5.
                                      <dt id="lien1" onmouseover="javascript:selection(1)" onmouseout="javascript:selection(0)"><a href="biographie.html"><img src="images/biographie.png"></a></dt>
   6.
                                      <dt id="lien2" onmouseover="javascript:selection(2)" onmouseout="javascript:selection(0)"><a href="membres.html"><img src="images/membres.png"></a></dt>
   7.
                                      <dt id="lien3" onmouseover="javascript:selection(3)" onmouseout="javascript:selection(0)"><a href="concerts.html"><img src="images/concerts.png"></a></dt>
   8.
                                      <dt id="lien4" onmouseover="javascript:selection(4)" onmouseout="javascript:selection(0)"><a href="media.html"><img src="images/media.png"></a></dt>
   9.
                                      <dt id="lien5" onmouseover="javascript:selection(5)" onmouseout="javascript:selection(0)"><a href="contact.html"><img src="images/contact.png"></a></dt>
  10.
                              </dl>
  11.
                      </div>
  12.
 
  13.
              </div>

mon code javascript :

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
#
function selection(choix){
#
if( choix == 1 )
#
{
#
document.getElementById("menu").style.backgroundPosition = "30px -288px";
#
document.getElementById("lien1").style.paddingLeft = "78px";
#
document.getElementById("lien1").style.backgroundPosition = "50px 5px";
#
}
#
else if( choix == 2 )
#
{
#
document.getElementById("menu").style.backgroundPosition = "30px -238px";
#
document.getElementById("lien2").style.paddingLeft = "78px";
#
document.getElementById("lien2").style.backgroundPosition = "50px 5px";
#
 
#
}
#
else if( choix == 3 )
#
{
#
document.getElementById("menu").style.backgroundPosition = "30px -188px";
#
document.getElementById("lien3").style.paddingLeft = "78px";
#
document.getElementById("lien3").style.backgroundPosition = "50px 5px";
#
}
#
else if( choix == 4 )
#
{
#
document.getElementById("menu").style.backgroundPosition = "30px -138px";
#
document.getElementById("lien4").style.paddingLeft = "78px";
#
document.getElementById("lien4").style.backgroundPosition = "50px 5px";
#
}
#
else if( choix == 5 )
#
{
#
document.getElementById("menu").style.backgroundPosition = "30px -88px";
#
document.getElementById("lien5").style.paddingLeft = "78px";
#
document.getElementById("lien5").style.backgroundPosition = "50px 5px";
#
}
#
else
#
{
#
document.getElementById("menu").style.backgroundPosition = "30px 0px";
#
document.getElementById("lien1").style.paddingLeft = "28px";
#
document.getElementById("lien2").style.paddingLeft = "28px";
#
document.getElementById("lien3").style.paddingLeft = "28px";
#
document.getElementById("lien4").style.paddingLeft = "28px";
#
document.getElementById("lien5").style.paddingLeft = "28px";
#
document.getElementById("lien1").style.backgroundPosition = "0px 5px";
#
document.getElementById("lien2").style.backgroundPosition = "0px 5px";
#
document.getElementById("lien3").style.backgroundPosition = "0px 5px";
#
document.getElementById("lien4").style.backgroundPosition = "0px 5px";
#
document.getElementById("lien5").style.backgroundPosition = "0px 5px";

Merci de m'éclairer!

PS : au passage, j'ai aussi un bug avec mon en tete qui se met au milieu :D mais je pense m'en dépatouiller.

Bonjour,
tu peux remplacer tes onmouseover/onmouseout par un équivalent CSS (puisque seuls les propriétés CSS sont modifiées).
Ex :
Code:

1 2 #lien1 {padding-left:28px;} #lien1 :hover {padding-left:78px;}
Sinon : pas de "javascript:" dans le code des évènements ...

A+

Bonjour, et merci pour ta réponse,

Mon problème est que sur mon onmouseover, j'ai plusieurs images qui bougent : le lien, et la chaine qui monte. Et si je ne me trompe pas c'est impossible en css de faire un truc du genre :

Code:

#lien1 :hover {faire bouger une autre image que lien1}

mais il y a peut etre une solution uniquement en css, si quelqu'un la voie, j'accepte!
Sinon j'ai enlevé les javascript: dans le code mais ça ne fonctionne toujours pas...