Sujet Précédent Sujet Suivant

Problème de mouseout

Fermé
Rémi - 17 juin 2009 à 11:39
PhP Messages postés 1770 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 - 17 juin 2009 à 17:16
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 lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
17 juin 2009 à 11:51
Bjr

Sans le code comment veux-tu qu'on puisse te répondre ?
0
Rémi
17 juin 2009 à 12:18
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 mercredi 15 avril 2009 Statut Membre Dernière intervention 7 février 2010 1
17 juin 2009 à 12:17
J'ai le même problème avec des images.
0
Réponse 3 / 3
PhP Messages postés 1770 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
17 juin 2009 à 17:16
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

Discussions similaires

mouseover, mouseout
MI7QC -
jordane45 -

3 réponses