Js mouseover sur left
Bonjour, je n'arrive pas a faire fonctionner ma fonction
je voudrais déplacer avec un style left une div au survol d'un lien et continuer a la déplacer temps que la souris est sur le lien.
Voila mon code :
Js :
Html :
voila, merci beaucoup. :)
je voudrais déplacer avec un style left une div au survol d'un lien et continuer a la déplacer temps que la souris est sur le lien.
Voila mon code :
Js :
var pos1 = 0;
function mouse_over(bt_1) {
while(true) {
pos1 += 5;
document.getElementById(tata).style.left = pos1+"px";
}
}
Html :
<div class="toto">
<a href="#" id="bt_1" onmouseover="mouse_over('fvb')">teste left</a>
<a href="#" id="bt_2"> teste droite</a>
</div>
<div id="tata" style="position:absolute;left:0px;">
bla blablablablablabla blablabla blabla bla blabla bla bla
</div>
voila, merci beaucoup. :)
11 réponses
-
Ah ouais, là c'est 'achement plus clair!
Je regarde ça ;)
Edit:
Qqch dans le genre?<html> <head> <script type="text/javascript"> function Div(){ this.sens = 'right'; this.decal = 3; this.timer; this.initTimer = function(status){ false===status?clearInterval(this.timer):this.timer=setInterval('div.move();', 50); } this.move = function(){ var element = document.getElementById('leFameuxDiv'); var pos = parseInt(element.style.left); switch(this.sens){ case 'right':element.style.left = pos + this.decal + 'px'; break; case 'left':element.style.left = pos - this.decal + 'px'; break; } } } function init(){ div = new Div(); } var div; </script> <style type="text/css"> #leFameuxDiv{border:#333 solid 1px; position:absolute; top:40px} #boutons{width:100%} #boutons input{float:right} </style> </head> <body onload="init()"> <div id="leFameuxDiv" style="left:0">Le fameux Div</div> <div id="boutons"> <input type="button" value="right" onmouseover="div.sens = 'right'; div.initTimer(true);" onmouseout="div.initTimer(false);"/> <input type="button" value="left" onmouseover="div.sens = 'left'; div.initTimer(true);" onmouseout="div.initTimer(false);"/> </div> </body> </html> -
j'ai trop du mal .... XD
je voudrais un bouton pour aller vers la droite et un vers la gauche. -
<a href="#" id="bt_1" onmouseover="initTimer(true);" onmouseout="initTimer(false);">Le fameux lien</a> <a href="#" id="bt_2" onmouseover="initTimer(true);" onmouseout="initTimer(false);">Le fameux lien vers droite</a>
Là tes deux liens font exactement la même chose... je comprends pas tellement le but ^^
Voila le code d'après ce que j'ai compris...
<html> <head> <script type="text/javascript"> function initTimer(status){ false===status?clearInterval(timer):timer=setInterval('deplaceLeFameuxDivSTP();', 50); } function deplaceLeFameuxDivSTP(){ var element = document.getElementById('leFameuxDiv'); element.style.left = parseInt(element.style.left) + 3 + 'px'; } var timer; </script> <style type="text/css"> #leFameuxDiv{border:#333 solid 1px; position:absolute; top:40px} #boutons{width:100%} #boutons input{float:right} </style> </head> <body> <div id="leFameuxDiv" style="left:0">Le fameux Div</div> <div id="boutons"> <input type="button" value="Bouton 2" onmouseover="initTimer(true);" onmouseout="initTimer(false);"/> <input type="button" value="Bouton 1" onmouseover="initTimer(true);" onmouseout="initTimer(false);"/> </div> </body> </html> -
ba avec deux boutons
<div id="leFameuxDiv" style="border:#333 solid 1px; position:absolute; left:0; top:40px">Le fameux Div</div> <a href="#" id="bt_1" onmouseover="initTimer(true);" onmouseout="initTimer(false);">Le fameux lien</a> <a href="#" id="bt_2" onmouseover="initTimer(true);" onmouseout="initTimer(false);">Le fameux lien vers droite</a>
avec un code dans le genre :
function deplaceLeFameuxDivSTP(){ var element = document.getElementById('leFameuxDiv'); element.style.left = parseInt(element.style.left) - 1 + 'px'; } -
tout à droite de la page ?
et donc au survol du bouton ça déplacerait le div ? -
Oui c'est tout bien merci :)
PS : et si je veux ajouter un bouton pour faire la meme chose mais a droite ?
Encore merci. -
tu as bien collé tout le code dans la partie html ?
-
non pardon c'est moi, il fonctionne mais il me dit qu'il y a 4erreur, je teste avec :
http://jsbin.com/ -
Hum... Je viens pourtant de le re-tester et il fonctionne chez moi... tu as quel navigateur ?
-
Bonjour merci d'avoir répondu, mais ca ne fonctionne pas.
dommage. -
Hello !
Voila pour toi:
<html> <head> <script type="text/javascript"> function initTimer(status){ false===status?clearInterval(timer):timer=setInterval('deplaceLeFameuxDivSTP();', 50); } function deplaceLeFameuxDivSTP(){ var element = document.getElementById('leFameuxDiv'); element.style.left = parseInt(element.style.left) + 3 + 'px'; } var timer; </script> </head> <body> <div id="leFameuxDiv" style="border:#333 solid 1px; position:absolute; left:0; top:40px">Le fameux Div</div> <a href="#" onmouseover="initTimer(true);" onmouseout="initTimer(false);">Le fameux lien</a> </body> </html>
++
