11548 sujets

JavaScript, DOM et API Web HTML5

Onmouseover et onmouseout ne fonctionne pas avec IE

Bonjour tout le monde,

J'ai créé un site qui contient un menu.

Le dernier élément de ce menu "Dossiers" fonctionne avec un sous-menu.

Ce sous-menu fonctionne parfaitement avec Opera, Safari, Firefox et Google Chrome.

Malheureusement, cela ne fonctionne pas avec Internet explorer 8.

Voici l'enclenchement de l'évènement :

<div class="btn" onmouseover="afficher_masque_sous_menu('afficher');" onmouseout="afficher_masque_sous_menu('masquer');" >


et voici le code js de la fonction "afficher_masque_sous_menu" :

function afficher_masque_sous_menu(action)
{
	if(action == 'afficher')
	{
		document.getElementById('sousmenu').style.display = 'block';	
	}
	else
	{
		document.getElementById('sousmenu').style.display = 'none';	
	}
	
}


Avec IE, lorsque je me mets sur le menu, le sous-menu apparaît mais dès que je descends, le sous menu disparaît.

Y aurait-il une solution ?

Merci d'avance pour votre aide.

beegees
Bonjour Heyoan,

ça fait longtemps.

Voici le lien du site.

http://vetecocquereaux.be/

Pour l'instant, je souhaite résoudre le problème avec IE, après, j'améliorerai le design du sous-menu (qui n'est pas top actuellement).

Et la solution de mouseover de jquery résoudrait mon problème ?

Merci pour l'aide.

beegees
beegees a écrit :
ça fait longtemps.
Yep. Smiley smile

A priori le problème ne vient pas de JavaScript mais du CSS : dans l'idée ton menu doit être positionné et avoir un z-index supérieur aux autres éléments de la page (si tu n'en as pas d'autre z-index:2 suffit) afin de le placer au-dessus du reste.

Pourquoi ne pas avoir utilisé le fameux trio UL/LI/A comme expliqué dans ce tuto ? Je t'invite à partir sur cette base et du coup tu pourras pleinement profiter de cet article sur pompage qui explique tout ça : La vengeance des menus déroulants.

Personnellement j'ai toujours eu du mal avec les menus déroulants, qui sont la plupart du temps (et c'est le cas du tien), inaccessibles dès que le JS est désactivé. Smiley cligne
Merci pour ta réponse Heyoan,

Et bien, je n'ai pas l'impression que le problème provient du CSS car parfois, j'arrive à atteindre le sous-menu avec IE.

Je peux bien sûr me tromper.

N'est-il pas possible de mettre un petit timer quand l'évènement onmouseout est rencontré ?

C'est étrange.

beegees
Modifié par beegees (07 Aug 2010 - 11:45)
beegees a écrit :
Et bien, je n'ai pas l'impression que le problème provient du CSS
Smiley nimp Homme de peu de foi ! Smiley lol

C'est effectivement plus net avec IE6 qu'avec IE7 :

upload/8634-veto.jpg

On voit bien que le JavaScript fonctionne.
Oui. Tout comme avec IE6 :

upload/8634-veto2.jpg

ou avec Firefox.

Quoi qu'il en soit je ne veux te convaincre de rien et si ma réponse ne te convient pas il n'y a pas de problème. Smiley cligne
je n'ai jamais douté de tes réponses et ce n'est pas maintenant que je vais commencer.

Comme tu dis, le js fonctionne, je dirais même qu'il fonctionne trop bien car :

Dès que l'on quitte le menu (pour aller plus bas dans le sous-menu), il y a un blanc entre l'élément principal du menu ("Dossiers") et le premier élément du sous-menu ("Chiens").

Je pense qu'à ce moment là, l'évènement onmouseout agit.

Maintenant, je ne sais pas pourquoi cela ne se passe qu'avec IE;

Pour ce qui est du z-index, quel élément je dois mettre en z-index:10000 ? (grosse valeur pour être sûr qu'il n'y ait pas d'autre élément plus haut).

Merci pour ton aide.

beegees
beegees a écrit :
je n'ai jamais douté de tes réponses et ce n'est pas maintenant que je vais commencer.
A vrai dire ça m'arrive (souvent ?) de dire des conn... bêtises mais merci quand même ! Smiley langue

beegees a écrit :
il y a un blanc entre l'élément principal du menu ("Dossiers") et le premier élément du sous-menu ("Chiens").

Je pense qu'à ce moment là, l'évènement onmouseout agit.
Oui... et c'est également un problème de CSS : comme tu le sais les versions d'IE < 8 ont des problèmes avec son implémentation.

beegees a écrit :
Pour ce qui est du z-index, quel élément je dois mettre en z-index:10000 ? (grosse valeur pour être sûr qu'il n'y ait pas d'autre élément plus haut).
Eh bien déjà ça ne sert à rien de mettre une grosse valeur (un 10 suffit si le 2 t'embêtes) car le jour où tu décides de rajouter un script du genre lightbox tu vas avoir des soucis (il me semble qu'il utilise un z-index:1000 pour justement être sûr d'être toujours au dessus).

Pour ce qui est des éléments à utiliser il y a plusieurs solutions. Avec le fameux trio UL/LI/A (je sais j'insiste) on peut mettre le LI en position:relative et un éventuel sous-menu (UL) en position:absolute avec z-index qui va bien.


Edit: en complément voir Impact sur le rendu de la mise en forme du code HTML (notamment le dernier chapitre).
Modifié par Heyoan (07 Aug 2010 - 12:53)
Sujet clos
Aller à