Boutons d'un menu qui bougent...
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:
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
