Boutons d'un menu qui bougent...

Signaler
Messages postés
6
Date d'inscription
vendredi 31 décembre 2004
Statut
Membre
Dernière intervention
20 janvier 2011
-
Messages postés
6
Date d'inscription
vendredi 31 décembre 2004
Statut
Membre
Dernière intervention
20 janvier 2011
-

2 réponses

Messages postés
6
Date d'inscription
vendredi 31 décembre 2004
Statut
Membre
Dernière intervention
20 janvier 2011

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>



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











</html>
Messages postés
6
Date d'inscription
vendredi 31 décembre 2004
Statut
Membre
Dernière intervention
20 janvier 2011

RESOLU

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



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











</html>