Problème de mouseout

Rémi -  
PhP Messages postés 1770 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
Bon, je suis face à un problème dont j'arrive pas à m'extirper.

En fait,
J'ai mon div de sous menu, qui s'affiche quand on passe sur le titre du menu,
et je veux que quand je quitte la zone de ce sous-menu, il disparaisse (normal).
Le problème est que j'ai une liste dans ce div de sous menu, et quand on arrive sur la liste, il considère qu'il est sorti du div de sous menu alors que la liste est à l'intérieur. Donc mon sous menu s'efface.
C'est pas normal je crois.
:/
Petite précision, mon div de sous menu est en position:absolute et je le place en fonction de la position du titre du menu.

Merci d'avance,

3 réponses

Réponse 1 / 3
PhP Messages postés 1770 Date d'inscription   Statut Membre Dernière intervention   606
 
Bjr

Sans le code comment veux-tu qu'on puisse te répondre ?
0
Rémi
 
Le bout de code HTML : 
<img ....... onmouseout="document.getElementById('home').src='images/menu-titles/white-home.png';t = setTimeout('disappear_menu(this.id)',1000);" />


<div class="liensmenu" id="div_guide" onmouseover="clearTimeout(t);" onmouseout="disappear_menu(this.id);">
<ul class="lienmenu">
<li><a href="#">Class Guide</a></li>
<li><a href="#">XP Guide</a></li>
<li><a href="#">Mini-Games Guide</a></li>
</ul>
</div>


le CSS: 
#div_guide {
border-top:none;
position:absolute;
width:150px;
height:200px;
display:none;
text-align:left;
background-color:#161616;
}



Et le Javascript pour placer le sous-menu : 
function FindXY(obj){
var x=0,y=0;
while (obj!=null){
x+=obj.offsetLeft-obj.scrollLeft;
y+=obj.offsetTop-obj.scrollTop;
obj=obj.offsetParent;
 }
return {x:x,y:y};
}
function deploy_menu(id)
{
document.getElementById("div_guide").style.display = "block";
document.getElementById("div_guide").style.left = (FindXY(document.getElementById(id))['x']-10)+"px";
document.getElementById("div_guide").style.top = (FindXY(document.getElementById(id))['y']+20)+"px";
}

function disappear_menu(id)
{
	document.getElementById("div_guide").style.display = "none";
}



Voilà :/
0
Réponse 2 / 3
Flatbeat Messages postés 30 Date d'inscription   Statut Membre Dernière intervention   1
 
J'ai le même problème avec des images.
0
Réponse 3 / 3
PhP Messages postés 1770 Date d'inscription   Statut Membre Dernière intervention   606
 
Oui c'est bien là le problème avec l'implémentation des événements dans les éléments DOM des pages html

On pourrait penser que lorsqu'on place un onMouseOut sur un élément (un div par ex) alors l'événement n'est déclenché uniquement lorsqu'on sort de cet élément et pas quand on entre dans un des éléments enfant lui appartenant.
Hé bien non !

J'ignore qui est l'abrutit qui a une cette "idée" mais ça marche bel et bien comme ça :-( A part compliquer les choses je n'ai jamais trouvé une utilisation pratique à ce mode de fonctionnement. C'est anti-naturel au possible : c'est comme si on entrait dans un salon et considéré qu'on en sort dès qu'on marche sur le tapis !
Débile mais il faut faire avec ! T'Oh !

Tel que tu as implémenté tes gestionnaires d'événement (de façon inline) tu ne peux pas te rendre compte de l'étendu des dégâts : voici un ex en utilisant le modèle traditionnel d'implémentation des gestionnaires d'événement 

<!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>
<title>Test OnMouseOut</title>	
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>

body
{
	font-size : 10pt;
	font-family : arial;
}


.liensmenu ul
{
	background-color:#00DD00;	
}


#div_guide {
	border-style : solid;
	border-color : #ff0000;
	border-width:2px;
	position:absolute;
	width:150px;
	height:400px;
	top:10px;
	left:10px;

	text-align:left;
	background-color:#161616;
}

#div_debug
{
	position : relative;
	left:210px;
}
</style>

<script type="text/javascript">

function onMouseOutGuide(e)
{
	if (!e) var e = window.event
	var source = e.target || e.srcElement;
	var dest = e.relatedTarget || e.toElement;

	var elt = document.getElementById("debug");
	elt.value +="source.id="+source.id+' source.nodeName='+source.nodeName+" -> dest.nodeName="+dest.nodeName+"\n";
}

function start()
{
	document.getElementById("debug").value="";
	var elt = document.getElementById("div_guide");	
	elt.onmouseout=onMouseOutGuide;
}

window.onload=start;

</script>
</head>
<body>
	<div class="liensmenu" id="div_guide">
		<ul class="lienmenu">
		<li><a href="#">Class Guide</a></li>
		<li><a href="#">XP Guide</a></li>
		<li><a href="#">Mini-Games Guide</a></li>
		</ul>
	</div>
	<div id="div_debug">
		Debug<br />
		<textarea cols="70" rows="30" id="debug"></textarea>
	</div>	
</body>
</html>



Déplace la souris dans la zone noire du div et sur la zone verte contenant la liste et regarde tous les événements non souhaités qui se produisent !
Et encore je n'ai implémenté que le onMouseOut ! Même bordel avec onMouseOver tu imagines ?

Une solution possible dans mon prochain post ...
0