Js mouseover sur left
didi8546
-
didi2546 -
didi2546 -
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?
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>
Hello !
Voila pour toi:
++
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>
++
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
non pardon c'est moi, il fonctionne mais il me dit qu'il y a 4erreur, je teste avec :
http://jsbin.com/
http://jsbin.com/
Oui c'est tout bien merci :)
PS : et si je veux ajouter un bouton pour faire la meme chose mais a droite ?
Encore merci.
PS : et si je veux ajouter un bouton pour faire la meme chose mais a droite ?
Encore merci.
ba avec deux boutons
avec un code dans le genre :
<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';
}
<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>
:)