onmouseover et Animation d'un bouton

**starlogix** · 17/04/2009, 19h29

Bonjour,

Mon but est d'animé un bouton au passage de la souris, et lorsque celle ci s'en éloigne.

Mon code HTML :

Code :

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

1
2
3
<div id="aboutBtn" onmouseover="moveBtnUp('aboutBtn');" onmouseout="moveBtnDown('aboutBtn');" >
          <img id="aboutBtnImg" alt="" src="images/aboutBtn.png" border="0" /> 
</div>

Ce que je voudrais :
- Lorsque la souris est à l'intérieur du <div> l'<img> monte
- Lorsque la souris est à l'extérieur du <div> l'<img> descend

Les fonctions moveBtnUp bouge l'<img> vers le haut et moveBtnDown bouge l'<img> vers le bas dans le <div>.

Cependant il y a un problème:
En effet lorsque la souris touche le <div>, l'onmouseover fonctionne. Cependant toujours dans ce même <div> lorsque la souris touche l'<img> l'onmouseover devient un onmouseout, alors qu'on est toujours dans le <div> contenant !!!

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!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" >
<head>
   <title>ehCat</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
	<style>
 
	#aboutBtn{
	width:200px;
	height:200px;
	border:5px solid;
 
	}
 
	#aboutBtnImg{
	width:50px;
	height:50px;
	margin:auto;
	border:1px solid;
	position:relative;
	}
	</style>
 
 
</head>
 
<body onload="initMenu();">
 
<script type="text/javascript">
 
var onmouseover = 0;
var onmouseout = 0;
 
function moveBtnUp(btn)
{
	onmouseover = 1;
	onmouseout = 0;
	document.getElementById("test").innerHTML = 'onmouseover='+onmouseover;
	document.getElementById("test2").innerHTML = 'onmouseout='+onmouseout;
 
		clearTimeout(document.getElementById(btn+'Img').t2);
 
	var obj = document.getElementById(btn+'Img').style;	
 
	obj.backgroundColor = '#000000';
	obj.zIndex = '1';
 
	/*if ( parseInt(obj.top) == 0 )
	{
		obj.top = parseInt(obj.top)-1+'px';
		document.getElementById(btn+'Img').t1 = setTimeout(function(){moveBtnUp(btn);}, 20)
	}*/
 
	if ( parseInt(obj.top) <= 0 && parseInt(obj.top) > -10 )
	{
		obj.top = parseInt(obj.top)-1+'px';
		document.getElementById(btn+'Img').t1 = setTimeout(function(){moveBtnUp(btn);}, 20)
	}
	else if ( parseInt(obj.top) == -10 )
	{
		clearTimeout(document.getElementById(btn+'Img').t1);
	}
}
 
 
function moveBtnDown(btn)
{
	onmouseover = 0;
	onmouseout = 1;
	document.getElementById("test").innerHTML = 'onmouseover='+onmouseover;
	document.getElementById("test2").innerHTML = 'onmouseout='+onmouseout;
 
	clearTimeout(document.getElementById(btn+'Img').t1);
 
	var obj = document.getElementById(btn+'Img').style;
 
	obj.backgroundColor = '#ffffff';	
 
	if ( parseInt(obj.top) < 0 && parseInt(obj.top) >= -10 )
	{
		obj.top = parseInt(obj.top)+1+'px';
		btn.t2 = setTimeout(function(){moveBtnDown(btn);}, 20)
	}
	else if ( parseInt(obj.top) == 0 )
	{
		clearTimeout(document.getElementById(btn+'Img').t2);
	}
}
 
 
// ----------------------
// Initialise les objets
// ----------------------
 
function initMenu() {
  document.getElementById('aboutBtnImg').style.top = '0px';
  document.getElementById('cvBtnImg').style.top = '0px';
  document.getElementById('portfolioBtnImg').style.top = '0px';
  document.getElementById('contactBtnImg').style.top = '0px';
 
}
 
</script>
<div id="aboutBtn" onmouseover="moveBtnUp('aboutBtn');" onmouseout="moveBtnDown('aboutBtn');" >
	<div id="aboutBtnImg" ></div>
</div>
 
<br/><br/><br/><br/>
<p id="test"></p>
<p id="test2"></p>
 
</body>
</html>

Avez vous déjà remarqué ce problème ?

**SpaceFrog** · 17/04/2009, 21h38

classique, lorsque tu survole l'image il enclenche le onmouseout du div
Il faut passer par un flag et un timer ...

**starlogix** · 17/04/2009, 21h55

Merci de ta réponse.

Qu'est ce qu'un flag ? (J'ai essayé de google ça, c'est moi ou ya un grand trou au niveau de l'apprentissage du javascript sur le web ?)
Un timer c'est pas un setTimeout ?

Ah et pour bouger des images d'un menu, c'est mieux de modifier, top et bottom de la position, ou alors mettre une image en fond et modifier les coordonnées de son background ??

**andry.aime** · 19/04/2009, 10h01

Flag c'est pour dire une variable(souvent globale) avec laquelle tu contrôles l'état d'un ou plusieurs élément.

**starlogix** · 19/04/2009, 21h33

Envoyé par andry.aime

Flag c'est pour dire une variable(souvent globale) avec laquelle tu contrôles l'état d'un ou plusieurs élément.

Merci

As tu compris ce qu'il voulait dire par "utiliser un flag" ? Un variable pour le onmouseover et le onmouseout au lieu de l'evenement ? Ou pour le style.top ?

Ce que j'ai essayé de faire, c'est de mettre une variable sur le onmouseover et le onmouseout de la balise <img> afin de la diférencier de la balise <li>

J'ai donc résolu un problème, maintenant quand la souris vient du bas tout fonctionne, le bouton n'est pas stoppé...

Mais maintenant que j'ai ces nouvelles variables ça ne marche que pour un seul bouton ! L'interaction avec les autres ne fonctionne pas.

Afin que vous visualisiez le problème je vous ai fait un 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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!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" >
<head>
   <title>ehCat</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
   <style>
 
 
 
	#menuHaut ul
	{
	list-style-type:none;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	}
 
	#menuHaut li
	{
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	text-align:center;
	float:left;
	}
 
	#menuHaut li div{
	border:1px solid #000;
	width:50px;
	height:50px;
	position:relative;
	}
 
	</style>
 
</head>
 
<body onload="initMenu();">
 
 
 
<script type="text/javascript">
 
var t1 = null;
var t2 = null;
var test = 0;
var test2 = 0;
var onmouseoverImg = 0;
var onmouseover = 0;
 
function moveBtnUp(btn)
{
	onmouseover = 1;
 
	clearTimeout(document.getElementById(btn+'Img').t2);
 
	var obj = document.getElementById(btn+'Img').style;	
 
	if ( onmouseoverImg == 1 || onmouseoverImg == 0 )
	{
	// Qu'on touche ou pas l'<img>, le btn monte
		if ( parseInt(obj.top) <= 0 && parseInt(obj.top) > -10 )
		{
			obj.top = parseInt(obj.top)-1+'px';
			document.getElementById(btn+'Img').t1 = setTimeout(function(){moveBtnUp(btn);}, 20)
		}
	}
 
	document.getElementById('test').innerHTML = 'onmouseoverImg='+onmouseoverImg;
	document.getElementById('test2').innerHTML = 'onmouseover='+onmouseover;
	test++;
}
 
function moveBtnDown(btn)
{	
	onmouseover = 0;
	clearTimeout(document.getElementById(btn+'Img').t1);
 
	var obj = document.getElementById(btn+'Img').style;	
 
	if ( onmouseoverImg == 0 )
	{
	// Si on ne touche pas l'<img> ni le <li> , le btn descend
		if ( parseInt(obj.top) < 0 && parseInt(obj.top) >= -10 )
		{
			obj.top = parseInt(obj.top)+1+'px';
			document.getElementById(btn+'Img').t2 = setTimeout(function(){moveBtnDown(btn);}, 20)
		}
	}
 
	if ( onmouseoverImg == 1 )
	{
	// Si on touche <img>, le btn monte
	if ( parseInt(obj.top) <= 0 && parseInt(obj.top) > -10 )
		{
			obj.top = parseInt(obj.top)-1+'px';
			document.getElementById(btn+'Img').t2 = setTimeout(function(){moveBtnUp(btn);}, 20)
		}
	}
 
	document.getElementById('test').innerHTML = 'onmouseoverImg='+onmouseoverImg;
	document.getElementById('test2').innerHTML = 'onmouseover='+onmouseover;
	test2++;
}
 
// ----------------------
// Initialise les objets
// ----------------------
 
function initMenu() {
  document.getElementById('aboutBtnImg').style.top = '0px'
  document.getElementById('cvBtnImg').style.top = '0px'
  document.getElementById('portfolioBtnImg').style.top = '0px'
  document.getElementById('contactBtnImg').style.top = '0px'
}
 
</script>
 
 
<div id="main">
 
	<div id="logo"></div>
 
	<div id="menuHaut">
		<ul>
			<li id="aboutBtn" onmouseover="moveBtnUp('aboutBtn');" onmouseout="moveBtnDown('aboutBtn');" ><a href="#" ><div id="aboutBtnImg" onmouseover="onmouseoverImg=1" onmouseout="onmouseoverImg=0;"/></div></li>
			<li id="cvBtn" onmouseover="moveBtnUp('cvBtn');" onmouseout="moveBtnDown('cvBtn');" ><a href="#"><div id="cvBtnImg" alt="" src="images/cvBtn.png" onmouseover="onmouseoverImg=1" onmouseout="onmouseoverImg=0;" /></div></a></li>
			<li id="portfolioBtn" onmouseover="moveBtnUp('portfolioBtn');" onmouseout="moveBtnDown('portfolioBtn');" ><a href="#"><div id="portfolioBtnImg" alt="" src="images/portfolioBtn.png" onmouseover="onmouseoverImg=1;" onmouseout="onmouseoverImg=0;" /></div></a></li>
			<li id="contactBtn" onmouseover="moveBtnUp('contactBtn');" onmouseout="moveBtnDown('contactBtn');" ><a href="#"><div id="contactBtnImg" alt="" src="images/contactBtn.png" onmouseover="onmouseoverImg=1;" onmouseout="onmouseoverImg=0;"/></div></a></li>
		</ul>
	</div>
 
	<div id="canap"></div>
 
	<br/><br/><br/><br/>
 
	<p id="test" ></p>
	<p id="test2" ></p>
 
 
 
 
</div>
 
</body>
</html>

**andry.aime** · 22/04/2009, 15h30

Mais les codes javascript dans le head.
flag est une variable globale que tu testes sa valeur dans onmouseover et onmouseout.

onmouseover et Animation d'un bouton

JavaScript

Discussions similaires

Partager

Partager