Bonjour,
Après 2 jours de recherche je n'ai pas trouvé comment faire quelque chose qui me parait pourtant simple :
Un bouton qui déplace un bloc (div) à une certaine distance et une certaine vitesse. Un second clic sur le bouton redéplace depuis la nouvelle position du bloc et ainsi de suite. Il ne s'agit pas d'un "saut" vers une nouvelle position mais d'un déplacement visible.
Voici le code incomplet :
<html><head><title>Test, déplacement visible de bloc</title>
<style type="text/css">
.attributs1 {background-color:#FC0; position:absolute; top:100px; left:80px; width:100px; height:100px;}
.attributs2 {background-color:#0F0; position:absolute; top:100px; left:200px; width:100px; height:100px;}
</style>
<script type="text/javascript">
<!--
var vitesse = 50; // Une varible qui permette de regler la vitesse de déplacement
function deplacer(nombloc,x,y)
{
// Ici le script qui déplace le bloc dans la direction et à la vitesse demandée.
}
//-->
</script>
</head>
<body>
<div id="bloc1" class="attributs1">
BLOC 1<br>
Lorem ipsum dolor sit amet, c elitr, sed diam nonuolutpat.
</div>
<div id="bloc2" class="attributs2">
BLOC 2<br>
Lorem ipsum dolor sit amet, c elitr, sed diam nonuolutpat.
</div>
<input type="button" value="Déplacer 'bloc1' vers le bas" onClick="deplacer(bloc1,0,40)">
<input type="button" value="Déplacer 'bloc2' vers la droite" onClick="deplacer(bloc2,40,0)">
</body></html>
Si vous avez des idées, merci par avance !