Discussion :

[Titum]

Bonjour tous,
J'ai un menu horizontal en tableau HTML qui affiche un div précisément en dessous de la cellule du tableau sur laquelle passe la souris.

Quand je sors la souris de ce div il disparait grâce à un onmouseout.

Par contre si je me mets sur une cellule (ça affiche le div) et que je ressors du tableau par le haut ou le coté (sans passer *DANS* le div) alors je n'ai pas le onmouseout du div, donc pas de disparition du div.

Si je mets un onmouseout sur le tableau, il me tue le div lorsque je veux passer du tableau vers le div, donc trop tôt !

Je connais les systemes pour récupérer la position de la souris mais comme le div a aussi des positions variables, je me demande si il y aurait juste moyen de demander dans la fonction qui tue le div "est-ce que la souris est SUR le div?" sans avoir des bidouilles mathematiques pour calculer les 4 points du div et voir si je suis entre tout ça.

merci d'avance pour vos idées lumineuses.

[Titum]

pour préciser, le but est de mettre un onmouseover sur le tableau quand même, qui appelle la fonction de fermeture du div.
Mais dans cette fonction je veux ajouter la condition que ça se ferme SI la souris n'est PAS sur le div.

voilà.

merci

[SpaceFrog]

regarde du coté de cancelBubble ou stopPropagation

[RomainVALERI]

regarde du coté de cancelBubble ou stopPropagation

+1 ^^

[Titum]

J'ai essayé de comprendre cette histoire de propagation mais je ne pense pas que ce soit la solution pour 2 raisons :
1- mon div n'est pas contenu dans le tableau, la propagation n'a donc pas lieu entre les 2 éléments
2- mon problème a lieu sur le tableau donc si la propagation se faisait ce serait dans le sens div -> tableau (ça remonte) et pas l'inverse car le tableau serait parent.
Mais mes connaissances en DOM ne sont peut-être pas suffisantes pour saisir ces notions

Pour aider voilà les codes :

le 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
 
<div id=topdeck onmouseout="kill()" style="position: absolute; visibility: hidden; z-index:3; background-color: green; text-align:left"></div>
<script><!-- 
var nava = (document.layers);
var dom = (document.getElementById);
var iex = (document.all);
if (nava) { skn = document.topdeck }
else if (dom) { skn = document.getElementById("topdeck").style }
else if (iex) { skn = topdeck.style }
 --></script>
 <table id="tablo_menu" border=0 align="center" height=80 cellspacing=4><tr>
<td class="menu" id="menu1" onmouseover="menuon(this.id)" onmouseout="menuout(this.id)" onClick="menuopen(this.id)">INDEX</td>
<td class="menu" id="menu2" onmouseover="menuon(this.id)" onmouseout="menuout(this.id)">PAGE2</td>
<td class="menu" id="menu3" onmouseover="menuon(this.id)" onmouseout="menuout(this.id)"PAGE3</td>
</tr></table>

le script

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
 
<script type="text/javascript">  <!-- 
menu = new Array;
menu['menu1'] = {'link':'index.php', 'div':'lecontenu1'};
menu['menu2'] = {'link':'page2.php', 'div':'lecontenu2'};
menu['menu3'] = {'link':'page3.php', 'div':'lecontenu3'};
function menuon(m){
  document.getElementById(m).style.background = '#eeffee';
  skn.visibility = "hidden";
  skn.left = document.getElementById("tablo_menu").offsetLeft + document.getElementById(m).offsetLeft;
  skn.top = document.getElementById("tablo_menu").offsetTop + document.getElementById("tablo_menu").offsetHeight;
  var content = menu[m]['div'];
  if (nava) {
     skn.document.write(content);
	 skn.document.close();
	 skn.visibility = "visible";
  } else if (dom) {
	document.getElementById("topdeck").innerHTML = content;
	skn.visibility = "visible";
  } else if (iex) {
	document.all("topdeck").innerHTML = content;
	skn.visibility = "visible";
  }
}
function menuout(id) {
  document.getElementById(id).style.background = '#CCCCFF';
}
function kill(){
	skn.visibility = "hidden";
}
function menuopen(id) {
  window.open(menu[id],'_top');
}
document.onclick = kill;
 --></script>

La question est : puis-je ajouter dans la fonction kill() un test pour voir si la souris est au-dessus du div et si non, je peux cacher le div.
Comme ça je mets le même onmouseout sur le tableau qui va bien tuer le div si la souris sort par le haut ou les côté mais l'action sera bloquée si la souris est sortie vers le bas (donc se trouve sur le div qui est collé au tableau).

J'ai vu passer des EventListener et je me demande si je peux m'en servir pour savoir si l'evenement onmouseover de l'élément Div = true.

Voilà, merci...

[Auteur]

ça me fait penser aux sujets ouverts à une époque :
http://www.developpez.net/forums/d68...oppropagation/

http://www.developpez.net/forums/d59...nts-imbriques/

[Titum]

Merci pour les liens qui présentent des codes intéressants mais que je n'ai pas pu appliquer à mon problème.
Mais J'ai trouvé une solution !

Je veux que mon div se ferme quand je sors des cellules sans etre sur le div.
J'ai donc ajouté une variable div que je gère dans ma balise div pour savoir si je suis dessus.

Code :

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

<div id=topdeck onmouseover="div='on'" onmouseout="div='out';kill(1)" style="position: absolute; visibility: hidden; z-index:3; background-color: green; text-align:left"></div>

j'ai pu remettre la fonction kill sur le onmouseout des cellules. Comme j'avais un bug en bougeant la souris sur des liens à l'intérieur des cellules ou en revenant du div vers les cellules, j'ai aussi ajouté une variable d'ecoute de la présence sur le tableau, noté td

Code :

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

1
2
3
4
5
6
function menuout(id) {
  this.id=id;
  document.getElementById(this.id).style.background = '#CCCCFF';
  td = 'out';
  kill(1);
}

Pour finir il faut laisser le temps de passer de l'un à l'autre et fermer si la souris est ni sur les cellules ni sur le div.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function kill(etape){
    switch(etape)
    {
       case 1 :
          setTimeout("kill(2)",100);
          break;
       case 2 :
          if (div == 'out' && td == 'out') skn.visibility = "hidden";
          break;
    }
}

Voilà, pour moi ça me suffit, ce n'est pas compliqué et ne prend pas trop de ressources au navigateur.
Ce n'est peut être pas très élégant mais tant pis !

[Auteur]

Juste un détail sur ton code : évite de créer des variables portant le même nom qu'une balise html (ici div et td) tu pourrais avoir de mauvaises surprises avec certains navigateurs

[Titum]

ah oui, OK