Discussion :

[crackers-belin]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[E.Bzz]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onmouseout="stop();"

A+

[crackers-belin]

Elles sont dans le premier block de code =)

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

[E.Bzz]

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é

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

A+

[crackers-belin]

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

var dep=false;

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

[E.Bzz]

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à
=> Vire le paramètre de la fonction, pour que "dep" fasse toujours référence à la variable globale.

A+

[crackers-belin]

aurait tu une idée pour évité ce problème de boucle infini, en rapellant la fonction start avec dep=false, ça pourrait fonctionné ?

[E.Bzz]

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

A+

[crackers-belin]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[jln13]

Tu es sur que while(true) est accepte par le navigateur ?
Je suis sceptique...

[crackers-belin]

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

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

[jln13]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[crackers-belin]

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.

[jln13]

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

Bon ba je reviens vers toi des que j'ai une piste..

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

A+

[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

[crackers-belin]

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

Bonne journée

[E.Bzz]

Bien vu jln13

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

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

A+