onmouseout sous IE (toutes versions)

**will89** · 04/06/2008, 13h54

Bonjour, je sais que IE et FF ne gère pas tout à fait pareil les évènemenbts Javascript. Je suis en train de faire un menu déroulant en JS et il marche nickel sous FF mais pas sous IE. Je vous laisse voir, c'est par là.
Le problème vient de la navigation dans les menus, ils disparaissent sans raison sous IE.

Voici les codes :
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="generator" content="PSPad editor, www.pspad.com" />
    <title>Test JS</title>
    <link type="text/css" href="test_js.css" rel="stylesheet" />
    <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="test_js_ie_correctifs.css" />
    <![endif]-->
    <!--[if IE 6]>
        <link rel="stylesheet" type="text/css" href="test_js_ie6_correctifs.css" />
    <![endif]-->
    <script type="text/javascript" src="menu_js.js"></script>
  </head>
  <body>
    <div id="menu">
      <ul class="arbor1">
        <li><img src="images/critere_recherche.gif" alt="Votre recherche" /></li>
        <li onmouseover="montre('arbor_1')" onmouseout="cache('arbor_1')">
          <img class="img_arbor1" src="images/bouton_marque.gif" alt="Marque" />
          <ul class="arbor2" id="arbor_1">
            <li><a href="#">toutes les marques</a></li>
            <li><a href="#">american apparel by msr</a></li>
            <li><a href="#">american retro</a></li>
            <li><a href="#">inari</a></li>
            <li><a href="#">iro</a></li>
            <li id="last"><a href="#">mademoiselle est capricieuse</a></li>
          </ul>
        </li>
        <li onmouseover="montre('arbor_2')" onmouseout="cache('arbor_2')">
          <img class="img_arbor1" src="images/bouton_categorie.gif" alt="Catégorie" />
          <ul class="arbor2" id="arbor_2">
            <li><a href="#">toutes les cat&eacute;gories</a></li>
            <li><a href="#">bijoux &rsaquo;</a></li>
            <li><a href="#">chemises</a></li>
            <li><a href="#">robes &rsaquo;</a></li>
            <li id="last"><a href="#">vestes</a></li>
          </ul>
        </li>
        <li onmouseover="montre('arbor_3')" onmouseout="cache('arbor_3')">
          <img class="img_arbor1" src="images/bouton_couleur.gif" alt="Couleur" />
          <ul class="arbor2" id="arbor_3">
            <li><a href="#">toutes les couleurs</a></li>
            <li><a href="#">blanc</a></li>
            <li><a href="#">gris</a></li>
            <li><a href="#">anthracite</a></li>
            <li id="last"><a href="#">noir profond</a></li>
          </ul>
        </li>
        <li onmouseover="montre('arbor_4')" onmouseout="cache('arbor_4')">
          <img class="img_arbor1" src="images/bouton_prix.gif" alt="Prix" />
          <ul class="arbor2" id="arbor_4">
            <li><a href="#">Tous les prix</a></li>
            <li><a href="#">Moins de 50 &euro;</a></li>
            <li><a href="#">De 50 &euro; &agrave; 100 &euro;</a></li>
            <li><a href="#">De 100 &euro; &agrave; 200 &euro;</a></li>
            <li><a href="#">De 200 &euro; &agrave; 300 &euro;</a></li>
            <li id="last"><a href="#">Plus de 300 &euro;</a></li>
          </ul>
        </li>
        <li onmouseover="montre('arbor_5')" onmouseout="cache('arbor_5')">
          <img class="img_arbor1" src="images/bouton_trier.gif" alt="Options de tri" />
          <ul class="arbor2" id="arbor_5">
            <li><a href="#">Pas de tri</a></li>
            <li><a href="#">Prix croissant</a></li>
            <li><a href="#">Prix d&eacute;croissant</a></li>
            <li><a href="#">Les plus r&eacute;cents</a></li>
            <li id="last"><a href="#">Les plus anciens</a></li>
          </ul>
        </li>
        <li><img src="images/separation_menu_recherche.gif" alt="rien" style="width: 120px" /></li>
        <li><a href="#"><img src="images/bouton_recherche_avancee.gif" alt="Recherche avancée" /></a></li>
      </ul>
    </div>
    <div id="galerie">Test pour voir si ça passe bien au dessus</div>
  </body>
</html>

Javascript :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
// JavaScript Document
 
function montre (liste)
{
  document.getElementById(liste).style.visibility = 'visible';
}
 
function cache (liste)
{
  document.getElementById(liste).style.visibility = 'hidden';
}

CSS (feuille principale) :

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
/* CSS Document */
body {
  font-family: Tahoma;
  font-size: 12px;
}
 
img {
  border: 0px;
}
 
#menu {
  width: 799px;
  background-image: url(images/fond_barre_menu.gif);
  background-repeat: repeat-x;
  padding: 7px 0px 0px 4px;
}
 
.arbor1 {
  list-style-type: none;
	margin: 0px;
	padding: 0px;
}
 
.arbor1 li {
  display: inline;
  margin: 0px 0px 0px -4px;
  padding: 0px;
}
 
.img_arbor1 {
  cursor: pointer;
}
 
.arbor2 {
  position: absolute;
  z-index: 100;
  list-style-type: none;
	margin: 0px;
	padding: 0px;
	visibility: hidden;
}
 
.arbor2 li {
  display: block;
  margin: 0px 0px 0px 0px;
  padding: 0px;
  border-top: 1px solid #FF33CC;
  border-left: 1px solid #FF33CC;
  border-right: 1px solid #FF33CC;
}
 
.arbor2 li a:link, .arbor2 li a:visited {
  display: block;
  padding: 2px 4px;
  background-color: lightpink;
  color: black;
  text-decoration: none;
}
 
.arbor2 li a:hover {
  background-color: magenta;
}
 
#arbor_1 {
  margin: -2px 0px 0px 150px;
  text-transform: capitalize;
}
 
#arbor_2 {
  margin: -2px 0px 0px 230px;
  text-transform: capitalize;
}
 
#arbor_3 {
  margin: -2px 0px 0px 322px;
  text-transform: capitalize;
}
 
#arbor_4 {
  margin: -2px 0px 0px 400px;
}
 
#arbor_5 {
  margin: -2px 0px 0px 459px;
}
 
#last {
  border-bottom: 1px solid #FF33CC;
}

CSS (feuille de correction pour tout IE) :

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
/* CSS Document */
#arbor_1 {
  margin: 26px 0px 0px -83px; /* margin-left neg = largeur de l'image + 3*/
  text-transform: capitalize;
}
 
#arbor_2 {
  margin: 26px 0px 0px -95px;
  text-transform: capitalize;
}
 
#arbor_3 {
  margin: 26px 0px 0px -81px;
  text-transform: capitalize;
}
 
#arbor_4 {
  margin: 26px 0px 0px -62px;
}
 
#arbor_5 {
  margin: 26px 0px 0px -90px;
}

CSS (feuille spécifique à IE6) :

Code :

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

1
2
3
4
5
6
7
8
/* CSS Document */
.arbor2 li {
  margin: 0px 0px -14px 0px;
}
 
#last {
  margin: 0px;
}

**E.Bzz** · 04/06/2008, 14h09

Bonjour,
tu as une duplication de id="last" (un dans chaque menu).
Ce qui est strictement interdit (un id doit être unique).

Cette erreur suffit à générer un comportement aléatoire => à corriger avant toute tentative d'analyse du problème ...

A+

**will89** · 04/06/2008, 14h17

J'ai remplacé ces id par une classe last avec les mêmes propriétés mais cela ne change rien du tout au comportement sous IE.

**E.Bzz** · 04/06/2008, 14h18

Envoyé par will89

J'ai remplacé ces id par une classe last avec les mêmes propriétés mais cela ne change rien du tout au comportement sous IE.

Qui a dit que cela suffisait à corriger l'erreur ?

**will89** · 04/06/2008, 14h24

Merci, je suis peut-être pas au niveau mais ça je m'en suis douté. Enfin bon, cela ne m'aide pas sur le problème en Javascript.

**will89** · 09/06/2008, 16h20

Bien, désolé de revenir à la charge comme ça. J'ai bien conscience que ça n'est pas très réglo mais j'ai réellement besoin de régler ce problème de menu Javascript...
Je vous remets le lien : http://www.philippe-mouchel.fr/rollover_js/menu.html

Je vous rappelle le problème : le menu est nickel sous Firefox, Opéra ou encore Safari, mais toutes les versions d'IE me posent ce même problème de perte de focus qui entrainent le repliement automatique du menu.

Petite précision : sous IE, j'arrive parfois a descendre au deuxième voire au troisième menu les jours de chance mais pas plus, et ça disparait comme ça sans raison...

onmouseout sous IE (toutes versions)

JavaScript

Vue hybride

Discussions similaires

Partager

Partager