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.
<!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>