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

**tusssss** · 09/06/2008, 16h34

Peut-être une piste, avec l'utilisation conjointe de :

display : inline ou block et de l'instruction visibility : hidden visibility=visible

**SpaceFrog** · 09/06/2008, 16h42

J'ai remplacé ces id par une classe last

oui mais si tu conserve le même appel à l'objet ...

Code :

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

document.getElementById(liste).style.visibility

il faut bein qu'il aient un id ... pas une class ...

bref le plus simple serait encore de passer l'objet en paramètre de ta fonction :

Code :

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

1
2
3
4
5
6
7
<div id="menu">
      <ul class="arbor1">
        <li><img src="images/critere_recherche.gif" alt="Votre recherche" /></li>
        <li onmouseover="montre(this)" onmouseout="cache(this)">
          <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>

et :

Code :

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

1
2
3
4
5
6
7
8
9
function montre (liste)
{
  this.getElementsByTagName('ul')[0].style.visibility = 'visible';
}
 
function cache (liste)
{
  this.getElementsByTagName('ul')[0].style.visibility  = 'hidden';
}

**will89** · 09/06/2008, 17h11

J'ai essayé les deux solutions pour des résultats identiques. Rien ne change par rapport à ma solution déjà en place.

Par ailleurs, juste une petite remarque pour SpaceFrog, dans les fonctions Javascript c'est liste (nom du paramètre de la fonction) et pas this qu'il faut mettre.. J'imagine que c'est seulement une mauvaise saisie....

Mais je pense vraiment que le problème vient de la perte du focus plutôt que de ma fonction Javascript...

En tout cas merci quand même. Je continue à chercher..

**E.Bzz** · 09/06/2008, 17h19

Envoyé par will89

dans les fonctions Javascript c'est liste (nom du parametre de la fonction) et pas this qu'il faut mettre.

Exact

**SpaceFrog** · 09/06/2008, 17h24

quoi ?

Code :

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

function montre (liste)

j'ai bien mis liste ...
et je passe l'objet en paramètre :

Code :

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

1
2
 
<li onmouseover="montre(this)" onmouseout="cache(this)">

rien de plus normal ...
ou alors on ne parle pas de la même chose ?

**E.Bzz** · 09/06/2008, 17h30

Envoyé par SpaceFrog

quoi ?

Code :

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

function montre (liste)

j'ai bien mis liste ...

En paramètre, oui ...

Code :

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

1
2
3
4
5
6
7
8
9
function montre (liste)
{
  this.getElementsByTagName('ul')[0].style.visibility = 'visible';
}
 
function cache (liste)
{
  this.getElementsByTagName('ul')[0].style.visibility  = 'hidden';
}

A+

**SpaceFrog** · 09/06/2008, 17h43

Arf ... desolé en effet, je suis à coté de la plaque aujourd'hui suite à la perte d'une table en fin de semaine dernière. Je m'acharne à essayer de recupérer les morceaux depuis ce matin ...

**will89** · 09/06/2008, 18h16

J'ai identifié plus précisément le problème avec l'aide d'un collègue. En fait on s'aperçoit que tant qu'il n'y a rien en dessous du menu, il marche parfaitement, sous IE (6 et 7). C'est pour cela que quand on navigue sur la gauche du menu des marques (qui passe par dessus une image) il se replie dès que la souris passe sur l'image, alors que les menus catégories, couleurs, prix et tri fonctionne très bien...

C'est tout bonnement incroyable... Si quelqu'un a d'autres suggestions qu'il n'hésite pas. Je testerai demain et je vous tiens au courant parce que la c'est la fin de la journée et le match commence !!!

**SpaceFrog** · 10/06/2008, 08h35

quand tu fais un on mouseover, le fait de rendre visible un menu déplace-t-le menu ce qui declencherait le onmousout ou un autre onmouseover ?

tu parles de superpositon ...
voir cancelBubble et stopPropagation ...

**will89** · 10/06/2008, 10h24

Pourrait-tu être un peu pus précis s'il te plait, SpaceFrog, parce je commence à peine à comprendre les évènements Javascript alors ces fonctions CancelBubble ou StopPropagation, j'ai bien trouvé quelques trucs dessus mais pour les mettre en place, gloups....

**will89** · 10/06/2008, 13h41

Bon, changement dans les données du problème. J'ai intégré le menu dans la page ou il est censé apparaitre au final. Le résultat est visible ici : http://www.philippemouchel.fr/marques.php.

Je tiens à vous signaler que les listes <ul> correspondant aux sous-menus qui apparaissent au survol des boutons marques, catégories, etc. sont à la fin de la page. En effet, c'est la seule solution que j'ai trouvé pour qu'ils apparaissent au dessus de la galerie défilante et non en dessous sous IE (puisqu'il ne gère pas la propriété CSS z-index).

Bref, on retrouve toujours le problème de la disparition des sous-menus sous IE (toutes les versions) et de plus, comme il y a beaucoup de marques, j'aimerais que les menus apparaissent en plusieurs colonnes. Est-ce que quelqu'un a une solution pour ça aussi ?

Edit (13H54) : en fixant une hauteur aux listes <ul> ainsi que la propriété overflow:auto;, j'ai pu faire apparaitre un ascenseur. Cependant si quelqu'un a une solution pour faire apparaitre la liste en plusieurs colonnes, je suis toujours preneur...

**will89** · 10/06/2008, 15h13

Bon, en bidouillant deux-trois choses, j'arrive au fur et à mesure au résultats que je cherche. Le résultat est toujours dispo à la même page. L'astuce que j'utilise, c'est que je supprime les évènements onmouseout.

Du coup la fonction qui fait apparaitre une liste fait également disparaitre les autres. C'est bête et méchant...

Seulement j'ai du gérer aussi la sortie des menus. J'ai donc encadrer mon menu avec des blocs invisibles sur lesquels je déclenche une fonction qui me cache toutes les listes..

Bref, si vous voulez voir le code, il vous suffit d'afficher la source car il est long donc je peux pas le mettre ici directement.

Il reste encore quelques petits problèmes. Quand on sort d'un menu ouvert, j'arrive pas à gérer d'évènement pour cacher le menu... (si vous voyez ce que je veux dire)

Et puis, comme le passage sur les images déclenche l'affichage d'une vignette, lorsque que l'on passe la souris sur les menus, celle-ci commence à clignoter de manière assez désagréable...

**SpaceFrog** · 10/06/2008, 15h18

mouarf j'adore le gros plan sur les écharpes ...

bref ... heu c'est sur quelle parti ton souci déja ? mousover de quoi ?

**will89** · 10/06/2008, 15h25

Bin en fait j'ai changé de système pour abandonner le onmouseout. Du coup, on peut descendre dans le menu.

Les problèmes sont maintenant différents.

Il y a le clignotement de la vignette (justement le gros plan sur les écharpes entre autres...) ET je n'arrive pas a gérer la disparition des listes quand on sort du menu sans remonter sur les boutons du haut...

Pis accessoirement, j'aimerais que les menus apparaissent en plusieurs colonnes plutôt qu'une avec un ascenseur...

NB : du coup c'est vrai que le titre du post n'est plus forcément adapté...

onmouseout sous IE (toutes versions)

JavaScript

Discussions similaires

Partager

Partager