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 ??

onmouseover et Animation d'un bouton

JavaScript

Vue hybride

Discussions similaires

Partager

Partager