Gros problème de onmouseout

**Matgic95** · 12/02/2007, 10h43

J'ai cherché dans différents forum mais je n'ai pas trouvé une solution satisfaisante. Je vous montre mon code et en explique le probleme. Je ne mets pas le css car le problème ne vient pas de là

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
 
Partie HTML
 
<body>
<script type="text/javascript" src="animation.js"></script>
<div id="bloc" onmouseout="disappear()"><!--onmouseleave-->
	<div id="logo" onmouseover="appear()"><div id="logo_img"></div></div>
	<div id="link">
		<li><span class="title">Entreprise Fake</span></li>
		<li><span class="text">blablalblalal</span></li>
		<li><a href="#">www.samsung.fr</a></li>
	</div>
	<div id="services">
		<img src="img/movie.png"/>
		<img src="img/phone.png"/>
		<img src="img/note.png"/>
	</div>
</div>
</body>

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
 
Partie javascript
 
function anim_logo(state)
	{
	if(state==true)
		{
		document.getElementById("link").style.display="none";
		document.getElementById("services").style.display="block";
		}
	else if(state==false)
		{
		document.getElementById("link").style.display="block";
		document.getElementById("services").style.display="none";
		}
	}
 
function appear()
	{
	anim_logo(true);
	}
 
function disappear()
	{
	anim_logo(false);
	}

Ce que je veux que ca fasse:
Passer sur le logo et que celui-ci fasse disparaitre le div link et apparaitre le div services par une animation (dont le probleme vient d'etre resolu sur le forum)- Cette partie marche
Ensuite lorsque que je quitte le div bloc qui contient tout, je voudrais que e div services disparaisse et laisse ca place au div link

Problème:
Lorsque je quitte le logo, le div bloc déclenche l'événément onmouseout

Solution partielle:
Sous IE il existe l'événement onmouseleave, c'est exactement cela que je veux mais il me faudrait un équivalent pour Firefox

**SpaceFrog** · 12/02/2007, 11h13

je ne comprends pas ce que tu veux faire ?

tu y ajoutes le code de fading ?

**Matgic95** · 12/02/2007, 11h16

Oui je vais le rajouter après, en fait j'ai deja fait pas mal de test et je recommence depuis le début afin d'avoir un code propre.
J'avai deux problèmes, le fading sous IE et celui de la détection du onmouseout.

Le problème de fading est résolu (merci) mais maintenant ya le onmouseout qui se déclenche dès que je quitte le div logo et non lorsque je quitte le div bloc.

J'ai peut-etre une idée car j'avais deja remarque que si je remplace

Code :

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

1
2
 
<div id="bloc" onmouseout="disappear()">

par

Code :

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

<div id="bloc" onmouseout="disappear()" onmouseover="appear()">

Mais le problème c'est que vu que j'ai une fonction de fading, cela va se voir puisque l'animation va se relancer

Donc je pense à une solution de lancer une fonction stay() à la place du appear() pour l'événement onmouseover.
Ca peut peut etre marche, je vais tester.
Si vous avez des idées, n'hésitez pas

**SpaceFrog** · 12/02/2007, 11h23

ha ça y'est pigé ... pfff les enurones du lundi matin ne sont plus ce qu'ils étaient ...

en fait lorsque tu passes sur les sous divs, il considère que tu quittes le div ...

la seule solutin que je verrais dans ton cas c'est de mattre une variable flag à true lorsque tu quittes vraiment le div et la mettre à fasle lorsque tu passes sur les sous div ... et lancer un test sur le variable en première ligen de la fonction de disparition ...

**Matgic95** · 12/02/2007, 11h40

Je viens de tester ta solution Space frog, ca ne fonctionne pas

**SpaceFrog** · 12/02/2007, 11h41

si elle focntionne, tu n'as juste pas du bien l'implementer ...

**Matgic95** · 12/02/2007, 11h44

En fait je ne comprends pas comment tu peux préciser que tu as "vraiment" quitter le div bloc. Comment faire la différence entre le moment ou tu sors du logo pour aller sur le bloc et le moment ou tu quittes le bloc pour alleer vers l'exterieur?

J'ai suivi ce que tu as dit et ca ne fonctionne pas

Je viens de tester ma fonction stay() et ca fonctionne

Code :

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

1
2
document.getElementById("link").style.display="none";
	document.getElementById("services").style.display="block";

Je sais c'est la meme que appear(), pour l'instant mais dans appear, il y aura une animation, pas dans stay()

PS: Merci Spacefrog de m'avoir aidé, j'aimerai bien tout de même faire fonctionner ta solution car c'est elle qui est la plus propre. Je vois tout afait ce que tu veux dire en parlant de flag, j'avais déjà essayé mais impossible de détecter correctement

**SpaceFrog** · 12/02/2007, 11h49

mets une variable gobale sur ta page

var flag=false

sur le onmouseover du div coneteneur tu la mets à false ainsi que sur le onmouseover des sous divs

tu ne la mets à true que sur le onmouseout du div conteneur...

puis en première ligne de la fonction de disparition:

Code :

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

if (flag){return false;}

**Matgic95** · 12/02/2007, 12h25

J'ai fait comme tu as dit mais ca ne fonctionne pas, ca empeche la fonction de disparition

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Animation liens</title>
<link href="animation.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<script type="text/javascript" src="animation.js"></script>
<div id="bloc" onmouseout="disappear();javascript:flag=true;" onmouseover="javascript:flag=false;">
	<div id="logo" onmouseover="appear();javascript:flag=false;"><div id="logo_img"></div></div>
	<div id="link" onmouseover="flag=false;">
		<li><span class="title">Entreprise Fake</span></li>
		<li><span class="text">blablalblalal</span></li>
		<li><a href="#">www.samsung.fr</a></li>
	</div>
	<div id="services" onmouseover="javascript:flag=false;">
		<img src="img/movie.png"/>
		<img src="img/phone.png"/>
		<img src="img/note.png"/>
	</div>
</div>
</body>
</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
16
17
18
19
20
21
22
23
24
25
26
27
28
var flag=false;
function anim_logo(state)
	{
	if(state==true)
		{
		document.getElementById("link").style.display="none";
		document.getElementById("services").style.display="block";
		}
	else if(state==false)
		{
		document.getElementById("link").style.display="block";
		document.getElementById("services").style.display="none";
		}
	}
 
function appear()
	{
	anim_logo(true);
	}
 
function disappear()
	{
	if (flag)
		{
		return false;
		anim_logo(false);
		}
	}

Peux-tu me dire ce qui ne va pas?.

**SpaceFrog** · 12/02/2007, 13h28

mets le flag à true AVANT de lancer la fonction !!!

Code :

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

onmouseout="javascript:flag=true;disappear();"

à chaque fois ...

**Auteur** · 12/02/2007, 14h20

bonjour,

ceci porra sans doute t'aider à comprendre la gestionn d'un même événement sur un élément parent et ses enfants :
http://www.developpez.net/forums/sho...%E9v%E9nements

**Matgic95** · 12/02/2007, 14h33

Ca ne fonctionne toujours pas

**Matgic95** · 12/02/2007, 14h38

Merci auteur, ton script qui détecte d'où tu sors et où tu rentres est exactmetn ce que je recherchais à détecter comme événement.
Je vais tester

**SpaceFrog** · 12/02/2007, 14h56

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
<script type='text/javascript'>
var flag=false
function sorti(){ //alert(flag)
						if(!flag){return false;}
						alert('sorti')
 
                         }
</script>
 
</head>
 
<body>
<div style="height:100px;width:200px; position:absolute; top:50px;left:60px; background-color:red;" onmouseover="flag=false;" onmouseout="flag=true;setTimeout(function(){sorti()},100);">&nbsp;
 	<div style="height:50px;width:20px; position:absolute; top:5px;left:80px; background-color:blue;" onmouseout="flag=false" onmouseover="flag=false;">&nbsp;</div>
    <div style="height:10px;width:50px; position:absolute; top:10px;left:10px; background-color:yellow;" onmouseout="flag=false" onmouseover="flag=false;">&nbsp;</div>
</div>
</body>

**Matgic95** · 12/02/2007, 15h33

Merci SpaceFrog, ca marche!!!!!

**SpaceFrog** · 12/02/2007, 16h49

Juste un détail, baisse la durée du setTimeout au maximum car si tu sors très vitre de deux niveaux de divs la focntion se declenche deux fois ...

Gros problème de onmouseout

JavaScript

Discussions similaires

Partager

Partager