ne pas faire disparaitre un div lorsque je suis sur un de ces enfants.

**elekis** · 16/07/2008, 14h58

bonjour,

j'essaie de faire un petit menu dynamic qui s'affiche lorsqu'on passe sur du text.

je le creer de la facon suivant et cela marche assez bien

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
  deleteLayers();
 var textLayer = document.createElement('DIV');
  textLayer.id = textId;
  textLayer.onmouseout=deleteLayers;
  textLayer.style.position = 'absolute';
  textLayer.style.left = (mouseX-10)+"px";
  textLayer.style.top  = (mouseY-10)+"px";
  textLayer.innerHTML =content;
  textLayer.style.zindex= 1;
  document.body.appendChild(textLayer);

comme on peut le voir, je supprime le layer lorsqu'on sort de sa zone.
le probleme c'est que dans le layer(donc dans le content) il peut (et il ya) des liens (des a href). et quand je vais dessus, et ben le layer disparait et donc je ne sais pas cliquer.

y a t il un moyen de savoir si c'est un de ces sous fils qui a declencher le onmouseout??
ou bien tout autre moyen de ne pas faire disparaitre le div quand on est sur un de ces sous fils.

merci

a++

**Matthieu2000** · 16/07/2008, 15h06

textLayer.onmouseout="deleteLayersExceptMe(this)";

**SpaceFrog** · 16/07/2008, 15h10

oui ou alors avec un setTimeout et un cleartimeout sur le onmouseover des enfants ...

**elekis** · 16/07/2008, 15h10

heu je comprend pas.

je fais quoi dans deleteLayersexeptme.

et que représente le this, le div, son fils??
et si j'ai le fils comment retrouver le pere?

merci

a++

**Matthieu2000** · 16/07/2008, 15h15

la même chose que deleteLayers sauf que tu ne supprimes pas le layer en paramètre s'il a des enfants.

**elekis** · 16/07/2008, 15h23

re

mais il a des enfants.
mon div aura toujours un ou plusieurs <a ...>...</a>
secondement, this pointera toujours sur textlayer, vu que c'est lui qui a le onmouseout.

ce que je comprend pas, c'est comment faire la difference (avec le this ou sans)
dans ma fonction deleteLayers pour savoir si je sort parce que je vais sur un a href ou si je sort parce que je vais en dehors du div .

merci

a++

**SpaceFrog** · 16/07/2008, 15h35

Code :

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

1
2
3
function foo(Obj){
 alert ('cet Objet possède '+Obj.childNodes.length + 'enfants.' )
}

Code :

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

1
2
3
4
5
6
<div onmousover="foo(this)"></div>
<div onmousover="foo(this)">
<a>coucou</a>
<a>coucou</a>
<a>coucou</a>
</div>

Mais ma méthode est garantie ... si tu l'avais lue ...

**elekis** · 16/07/2008, 15h37

salut et merci,

mais y a un truc que j'avais pas compris dans ta méthod, comment appelé deux fonction dans un seul mouseover.
et j'avoue que je comprend pas trop aussi ce que viens faire le temps la dedans?

merci

a++

**elekis** · 16/07/2008, 15h47

et en fait je comprend toujours pas.

apres la creation du div via javascript j'ai ca

Code :

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

1
2
3
4
5
6
 
<div onmouseout="foo(this)">
<a>coucou</a>
<a>coucou</a>
<a>coucou</a>
</div>

juste un seul div, pas 2.

a quio me ser alors de savoir le nombre d'enfant que j'ai vu que j'en aurai toujours 3.

merci

a++

**SpaceFrog** · 16/07/2008, 16h06

heu le nombre d'enfant c'etait juste pour illustere le this de mat ...

voilà comme je gèrerais le problème ...

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
<script type='text/javascript'>
function stopPropa(){
document.getElementById('innerdiv').onmouseout=function(evt){
			  		evt=(evt)?evt:window.event;
			  		if (evt.stopPropagation) {evt.stopPropagation();}
					else{evt.cancelBubble = true;}
					}
 
}
 
 </script>
 
<body onload="stopPropa()">
<div style="tex-align:center;height:400px;width:400px;background-color:red;padding:100px;" onmouseout="window['timer']=setTimeout(function(){alert('coucou')},100)"> <div id='innerdiv' style="background-color:green;height:150px;width:150px" onmouseover="clearTimeout(timer)" onmouseout="return false;">&nbsp;</div></div>
</body>

**elekis** · 16/07/2008, 16h35

heu... je suis désolé mais je comprend plus grand chose.

1) la méthod du this. je comprend toujours pas quoi cela sert de savoir que j'ai 3 enfants ( en fiat, je peux aller jusqu'a 50 enfants).

dois je inserer qqch?? y a t il moyen via le this de savoir si this est div ou a href? (cela m'aidera pas mal en fait).

2) le truc du timer , je catch absolument rien. mes connaissances en javascript ne sont pas elevé certes. mais la..... en plus comme j'ai dit, je peut aller jusqu'a 50 fils. faire une méthod par truc, c'est lourd.

merci

a++

**SpaceFrog** · 16/07/2008, 16h50

non il suffit d'attribuer une methode sur les fils dynamiquement ...
...

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
<script type='text/javascript'>
function stopPropa(){
var TabA=document.getElementById('div_1').getElementsByTagName('a');
for (i=0;TabA[i];i++){
               TabA[i].onmouseout=function(evt){
			  		                 evt=(evt)?evt:window.event;
			  		                 if (evt.stopPropagation) {evt.stopPropagation();}
					                 else{evt.cancelBubble = true;}
					                 }
					 }                
 
}
 
 </script>
</head> 
<body onload="stopPropa()">
<div id="div_1" style="tex-align:center;height:400px;width:400px;background-color:red;padding:100px;" onmouseout="window['timer']=setTimeout(function(){alert('coucou')},100)">
<a onmouseover="clearTimeout(timer)" >one</a><br />
<a onmouseover="clearTimeout(timer)" >two</a><br />
<a onmouseover="clearTimeout(timer)" >three</a><br />
</div>
</body>

**elekis** · 16/07/2008, 17h48

re salut,

j'ai essayer ton code et il marche bien dans un fichier html, mais j'ai un peu de mal a l'adapter a mon cas

voila ce que j'ai fait dans la méthode createlayer

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
 
function createLayer(content)
  { 
  deleteLayers();
  var textLayer = document.createElement('DIV');
  textLayer.id = textId;
  textLayer.onmouseout="window['timer']=setTimeout(function(){deleteLayers()},100)";
  textLayer.style.position = 'absolute';
  textLayer.style.left = (mouseX-10)+"px";
  textLayer.style.top  = (mouseY-10)+"px";
  textLayer.innerHTML =content;
  textLayer.style.zindex= 1;
  document.body.appendChild(textLayer);
  stopPropa();
  }

le truc, c'est que j'ai une erreur 'timer n'existe pas. alors que dans une html normal, tout passe.

aurait tu une idée.

merci

a+++

**SpaceFrog** · 16/07/2008, 18h40

essaye

Code :

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

1
2
 
  textLayer.onmouseout=function(){window['timer']=setTimeout(function(){deleteLayers()},100)";}

**elekis** · 17/07/2008, 06h49

super, cela a l'air de marcher impect.

merci pour tout
a++

ne pas faire disparaitre un div lorsque je suis sur un de ces enfants.

JavaScript

Discussions similaires

Partager

Partager