Discussion :

[Armazerus]

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 :

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
   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 :

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
#
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 mais je pense m'en dépatouiller.

[E.Bzz]

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

Code :

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

1
2
#lien1 {padding-left:28px;}
#lien1 :hover {padding-left:78px;}

Sinon : pas de "javascript:" dans le code des évènements ...

A+

[Armazerus]

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 :

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

#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...