Js mouseover sur left

didi8546 -

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 :

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. :)

Afficher la suite

11 réponses

prosthetiks

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>

didi2546
Wa ! génial merci. Je vais étudier ce code et l'utiliser. je n'aurais jamais trouvé seul.
:)

0

prosthetiks

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>

Réponse 3 / 11
didi2546
Bonjour merci d'avoir répondu, mais ca ne fonctionne pas.
dommage.

0
Réponse 4 / 11
prosthetiks
Hum... Je viens pourtant de le re-tester et il fonctionne chez moi... tu as quel navigateur ?

0
Vous n’avez pas trouvé la réponse que vous recherchez ?

La communauté CCM répond en moyenne en moins de 2h.

Posez votre question
Réponse 5 / 11
didi2546
non pardon c'est moi, il fonctionne mais il me dit qu'il y a 4erreur, je teste avec :
http://jsbin.com/

0
Réponse 6 / 11
prosthetiks
tu as bien collé tout le code dans la partie html ?

0
Réponse 7 / 11
didi2546
Oui c'est tout bien merci :)
PS : et si je veux ajouter un bouton pour faire la meme chose mais a droite ?

Encore merci.

0
Réponse 8 / 11
prosthetiks
tout à droite de la page ?

et donc au survol du bouton ça déplacerait le div ?

0

didi2546

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'; 
      }

prosthetiks

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

Réponse 11 / 11
didi2546
j'ai trop du mal .... XD
je voudrais un bouton pour aller vers la droite et un vers la gauche.

0

Js mouseover sur left

11 réponses

Discussions similaires

Newsletters