Boucle sur "OnMouseOver"

Version imprimable

Voir 40 message(s) de cette discussion en une page

Bonjour,

Débutant en javascript j'essaie de faire un petit script permettant au passage de la souris sur une image de déplacé une autre image.

Pour ça aucun soucis l'image est décalé comme je le souhaite, mais ce décalage ne s'effectue qu'une seule fois, j'ai essayé de faire des fonctions que j'appelle avec "onmouseover" et "onmouseout" pour débuté et arrêté le déplacement mais cela ne fonctionne pas.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 // La fonction de déplacement de l'objet function bouge(x,y) { if(document.getElementById) { hautimage += y; gaucheimage += x; document.getElementById("smile").style.top =hautimage; document.getElementById("smile").style.left = gaucheimage; } } // la fonction pour initialisé un déplacement function start(x,y,dep) { while(dep) { bouge(x,y); } } function stop() { dep=false; }
Puis dans le code xhtml :
Code:

1 2 3 4 < img src="./blabla.jpg" onmouseover="start(-10,0,true);" onmouseout="stop()">
Je précise que l'image que je veut déplacer est inséré en javascript de cette manière :
Code:

1 2 3 4 5 6 <SCRIPT LANGUAGE="javascript"> var hautimage = 300; var gaucheimage = 300; document.write('<IMG SRC="./images/smile.gif" ID=smile STYLE="position:absolute;top:'+hautimage+';left:'+gaucheimage+'">'); </SCRIPT>
Cordialement.

26/03/2009, 09h25
E.Bzz

Bonjour,
pour te répondre, il faudrait aussi voir les fonction start() et stop() que tu devrait d'ailleurs appeler par

Code:

onmouseout="stop();"

A+
26/03/2009, 09h28
crackers-belin

Elles sont dans le premier block de code =)

Même en apellant la fonction par onmouseout="stop();" je n'obtient rien.
A+
26/03/2009, 09h30
E.Bzz

Citation:

Envoyé par crackers-belin

Elles sont dans le premier block de code =)

Même en apellant la fonction par onmouseout="stop();" je n'obtient rien.

Arf !
J'avais pas scrollé :oops:

Il faut que tu transformes ton paramètre "dep" en variable globale, visiblement ;)

A+
26/03/2009, 09h34
crackers-belin

Re

Autant pour moi j'avais oublié ça, avant la fonction "bouge", je déclare dep de cette manière :

Citation:

var dep=false;
26/03/2009, 09h35
andry.aime

Salut,
dep est une paramètre de la fonction start et reste toujours true ce qui implique le boucle infinie que tu ne peux pas accéder depuis la fonction stop.
26/03/2009, 09h38
E.Bzz

Citation:

Envoyé par andry.aime

dep est une paramètre de la fonction start et reste toujours true ce qui implique le boucle infinie que tu ne peux pas accéder depuis la fonction stop.

Voilà :D
=> Vire le paramètre de la fonction, pour que "dep" fasse toujours référence à la variable globale.

A+
26/03/2009, 09h39
crackers-belin

Re

aurait tu une idée pour évité ce problème de boucle infini, en rapellant la fonction start avec dep=false, ça pourrait fonctionné ?
26/03/2009, 09h41
E.Bzz

Citation:

Envoyé par E.Bzz

=> Vire le paramètre de la fonction, pour que "dep" fasse toujours référence à la variable globale.

:mouarf:

A+
26/03/2009, 09h46
crackers-belin

Re
J'ai modifié mon code de cette manière :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function start(x,y) { dep=true; while(dep) { bouge(x,y); } } function stop() { dep=false; }
Et il ne se passe toujours rien :(
26/03/2009, 09h48
jln13

Tu es sur que while(true) est accepte par le navigateur ?
Je suis sceptique... :roll:
26/03/2009, 09h57
crackers-belin

Re

Je ne sais pas si while(true) est accepté par le navigateur, j'ai essayé en déclarant "var dep=0", et en faisant un while(dep==1), et j'obtient le même résultat qu'avec while(true).
26/03/2009, 10h04
E.Bzz

Jln13 a sûrement raison : pour le nav c'est une boucle sans fin, qui génère au mieux un avertissement ("bla bla peut ralentir votre ordi").

Si tu essayais plutôt de déclencher un setInterval() dans ta fonction start(), qui serait arrêté par ta fonction stop() ? :?

Il suffirait alors de passer tes "x" et "y" en globale, et ton traitement deviendrait plus simple (et moins lourd pour le nav).
En plus, ça te permet de choisir la fréquence de modif des "x" et "y" ;)

A+

A mon avis le while(true) fait que tu ne pourras jamais mettre dep a false.
J'ai ecrit un petit script en utilisant setTimeOut pour laisser le temps a la fonction stop() de mettre a false la variable dep et ca marchouille chez moa.

En esperant que ca t'aide..

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
<html>
	<head>
		<script type='text/javascript'>
		<!--
		var dep=false;
 
		// La fonction de déplacement de l'objet	
		function bouge(x,y)
		{
			if (dep)
			{
				hautimage += y;
				gaucheimage += x;
				document.getElementById("smile").style.top  = hautimage;
				document.getElementById("smile").style.left = gaucheimage;
				setTimeout("bouge("+x+","+y+")",10);
			}
		} 
		function start(x,y)
		{
			dep = true;
			bouge(x,y);
		}
 
		function stop()
		{
			dep=false;
		}
 
		-->
		</script>
	</head>
	<body>
 
		<img src="./blabla.jpg" onmouseover="start(-10,0);" onmouseout="stop();">
 
		<SCRIPT LANGUAGE="javascript">
		var hautimage = 300;
		var gaucheimage = 300;
		document.write('<IMG SRC="./images/smile.gif" ID=smile STYLE="position:absolute;top:'+hautimage+';left:'+gaucheimage+'">');
		</SCRIPT>
 
	</body>
</html>

26/03/2009, 10h15
crackers-belin

re

Merci pour ton aidre,

chez moi ça fonctionne très bien sur firefox, par contre sur IE 6 j'obtiens "erreur sur la page" en bas a gauche quand je passe sur l'image qui déclenche le déplacement.
26/03/2009, 10h28
jln13

arf dsl j'ai testé qu'avec FF.
On dirait que IE6 n'aime pas le onmouseover 8O

Bon ba je reviens vers toi des que j'ai une piste..
26/03/2009, 10h35
E.Bzz

Pour éviter les erreurs "fantôme", tu devrait remplacer ton document.write() par des instructions DOM.

EDIT : parce que le onmouseover ne pose aucun problème à IE ;)
(sauf sur les options de select :aie: )

A+
26/03/2009, 10h38
jln13

Ayé j'ai trouvé :)
En fait le nom de la fonction "start" est un nom réservé chez IE. Il suffit de renommer la fonction pour que ca fonctionne sous IE6 :)
26/03/2009, 10h44
crackers-belin

Re

Merci beaucoup pour ton/vôtre aide, je passe le sujet en résolu.

Bonne journée ;)
26/03/2009, 10h54
E.Bzz

Bien vu jln13 :king:

@crackers-belin > Par contre, le document.write() étant à proscrire, tu devrais quand même faire ça, si tu as le temps ;)

Citation:

Envoyé par E.Bzz

Pour éviter les erreurs "fantôme", tu devrait remplacer ton document.write() par des instructions DOM.

A+

Voir 40 message(s) de cette discussion en une page