Boutons d'un menu qui bougent...

**starlogix** · 17/04/2009, 16h02

Salut, j'ai un menu avec 4 boutons collés les un contre les autres.
Je voudrais que lorsque je passe ma souris sur l'un des boutons celui ci se lève de 10 px maximum, lorsque j'enlève la souris (à ni'mporte quelle moment de la monté) je voudrais que celui ci redescende à sa position originelle.

Mais mes boutons ne réagissent pas comme je veux... il reste bloqué en haut. Je galère sur ce code depuis 2 jours, je pense que cela viens des setTimeout (et surtout des clearTimeout). Je vous ai fait une page HTML pour que vous puissiez visualiser 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
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
<!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>
	#aboutBtnImg{
	width:50px;
	height:50px;
	border:1px solid;
	position:relative;
	top:0px;
	float:left;
	}
 
	#cvBtnImg{
	width:50px;
	height:50px;
	border:1px solid;
	position:relative;
	top:0px;
	float:left;
	}
 
	#contactBtnImg{
	width:50px;
	height:50px;
	border:1px solid;
	position:relative;
	top:0px;
	float:left;
	}
 
	#portfolioBtnImg{
	width:50px;
	height:50px;
	border:1px solid;
	position:relative;
	top:0px;
	float:left;
	}
	</style>
 
 
</head>
 
<body onload="initMenu();">
 
<script type="text/javascript">
 
var t1 = null;
var t2 = null;
var test = 0;
var test2 = 0;
 
function moveBtnUp(btn)
{
	clearTimeout(t2);
 
	var obj = document.getElementById(btn+'Img').style;	
 
	if ( parseInt(obj.top) <= 0 && parseInt(obj.top) > -10 )
	{
		obj.top = parseInt(obj.top)-1+'px';
		t1 = setTimeout(function(){moveBtnUp(btn);}, 20)
	}
	else
	{
		clearTimeout(t1);
	}
 
	document.getElementById("test").innerHTML = 'moveBtnUp='+test;
 
 
	test++;
}
 
function moveBtnDown(btn)
{	
	clearTimeout(t1);
 
	var obj = document.getElementById(btn+'Img').style;	
	if ( parseInt(obj.top) < 0 && parseInt(obj.top) >= -10 )
	{
		obj.top = parseInt(obj.top)+1+'px';
		t2 = setTimeout(function(){moveBtnDown(btn);}, 20)
	}
	else
	{
		clearTimeout(t2);
	}
 
	document.getElementById("test").innerHTML = 'moveBtnDown='+test2;
	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="aboutBtnImg" onmouseover="moveBtnUp('aboutBtn');" onmouseout="moveBtnDown('aboutBtn');"></div>
<div id="cvBtnImg" onmouseover="moveBtnUp('cvBtn');" onmouseout="moveBtnDown('cvBtn');"></div>
<div id="portfolioBtnImg" onmouseover="moveBtnUp('portfolioBtn');" onmouseout="moveBtnDown('portfolioBtn');"></div>
<div id="contactBtnImg" onmouseover="moveBtnUp('contactBtn');" onmouseout="moveBtnDown('contactBtn');"></div>
 
</body>
</html>

Merci d'avance

**le_chomeur** · 17/04/2009, 16h38

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
 
<!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>
	#aboutBtnImg{
	width:50px;
	height:50px;
	border:1px solid;
	position:relative;
	top:0px;
	float:left;
	}
 
	#cvBtnImg{
	width:50px;
	height:50px;
	border:1px solid;
	position:relative;
	top:0px;
	float:left;
	}
 
	#contactBtnImg{
	width:50px;
	height:50px;
	border:1px solid;
	position:relative;
	top:0px;
	float:left;
	}
 
	#portfolioBtnImg{
	width:50px;
	height:50px;
	border:1px solid;
	position:relative;
	top:0px;
	float:left;
	}
	</style>
 
 
</head>
 
<body onload="initMenu();">
 
<script type="text/javascript">
 
var t1 = null;
var t2 = null;
var test = 0;
var test2 = 0;
 
function moveBtnUp(btn)
{
	clearTimeout(document.getElementById(btn+'Img').t2);
 
	var obj = document.getElementById(btn+'Img').style;	
 
 
	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
	{
		clearTimeout(document.getElementById(btn+'Img').t1);
	}
 
 
	test++;
}
 
function moveBtnDown(btn)
{	
	clearTimeout(document.getElementById(btn+'Img').t1);
 
	var obj = document.getElementById(btn+'Img').style;	
	if ( parseInt(obj.top) < 0 && parseInt(obj.top) >= -10 )
	{
		obj.top = parseInt(obj.top)+1+'px';
		btn.t2 = setTimeout(function(){moveBtnDown(btn);}, 20)
	}
	else
	{
		clearTimeout(document.getElementById(btn+'Img').t2);
	}
 
	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="aboutBtnImg" onmouseover="moveBtnUp('aboutBtn');" onmouseout="moveBtnDown('aboutBtn');"></div>
<div id="cvBtnImg" onmouseover="moveBtnUp('cvBtn');" onmouseout="moveBtnDown('cvBtn');"></div>
<div id="portfolioBtnImg" onmouseover="moveBtnUp('portfolioBtn');" onmouseout="moveBtnDown('portfolioBtn');"></div>
<div id="contactBtnImg" onmouseover="moveBtnUp('contactBtn');" onmouseout="moveBtnDown('contactBtn');"></div>
 
</body>
</html>

il ne te reste plus qu'a épurer

**starlogix** · 17/04/2009, 16h50

Je savais que c'était un truc du genre... mais j'y serais pas arrivé seul !
Merci beaucoup le_chomeur !

Il reste encore un problème.. lorsque la souris vient du bas et ne va pas vite, le bloc ne bouge pas...

**starlogix** · 17/04/2009, 17h28

Je crois comprendre d'où cela vient... Quand la souris touche par en bas le bloc, celui ci monte, la souris ne le touche plus et donc il redescend tout de suite...

Comment faire pour que le bloc soit 'virtuellement' toujours à sa place originelle, afin que la souris le touche toujours même si elle reste dans cette plage de 10 px vidé.
Que faire ?

Boutons d'un menu qui bougent...

JavaScript

Vue hybride

Discussions similaires

Partager

Partager