Boucle sur "OnMouseOver"

Version imprimable

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+
07/04/2009, 16h50
RKOCOCO
Bonjour

je réouvre le topic !! En fait je souhaiterai faire la même chose sauf que j'utilise une interface SVG mais avec du Javascript. Sur ma page SVG j'ai
Code:

1 2 <image id="Bob" x="50" y="200" width="150" height="180" xlink:href="Bob/bob1.png"/>
et dans mon fichier javascript j'ai
Code:

1 2 3 4 5 6 7 8 function bouge(x,y) { hautimage += y; gaucheimage += x; document.getElementById("Bob").style.top = hautimage; document.getElementById("Bob").style.left = gaucheimage; }
Cette action est lancée par un bouton avec l'attribut onclick:
Code:

1 2 <rect class="menu" id="t2" x="50" y="80" width="90px" height="26px" rx="3.8px" ry="1.3px" onclick="bouge(10,0)" >
Et le bouton marche car si je lui demande de m'écrire par exemple les coordonnées de l'image il le fait.

L'image, elle, ne bouge pas.....
Merci d'avance

Code:

1
2
document.getElementById("Bob").style.top = hautimage + 'px';
  document.getElementById("Bob").style.left = gaucheimage + 'px';

07/04/2009, 17h02
E.Bzz

+1 pour les "px"

Mais encore faut-il que le CSS de l'image la définisse en position:absolute ou position:relative ...

A+
07/04/2009, 17h04
RKOCOCO

Désole mais cela ne fait rien. Quel était le but de rajouté 'px' ?
07/04/2009, 17h10
Bovino

Les styles top et left ont besoin de savoir de quelle unité tu parles !
Prend aussi en compte la remarque de E.Bzz :

Citation:

encore faut-il que le CSS de l'image la définisse en position:absolute ou position:relative ...

Voici le code de mon fichier svg. Pour moi il n'y a rien qui pourrait empêcher le déplacement de l'image

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
<?xml version="1.0" encoding="iso-8859-1"?>
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="blancbleu" r="100%" cx="50%" cy="50%" fy="50%" fx="50%">
      <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1"/>      
      <stop offset="100%" style="stop-color:#000fff;stop-opacity:1"/>      
    </radialGradient>
    <script type="text/javascript" xlink:href="action.js"/>
 
    <style type="text/css"><![CDATA[
      text.menu{
        font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
        font-size: 13px;
        pointer-events: none;
        fill: #E64100;
        text-anchor: middle;
      }
      rect.menu{
        fill: #FFEBD5;
        stroke: #FF8309;
        stroke-width: 1px;
      }
 
      ]]></style>      
  </defs>
 
   <image x="0" y="0" width="500" height="400" xlink:href="backgroundog4.png"/>
 
  <a xlink:href="" target="_top" >
    <rect class="menu" id="t1" x="150" y="80" width="90px" height="26px" rx="3.8px" ry="1.3px">    
      <animateColor attributeName="fill"   attributeType="CSS" dur="0.3s" begin="mouseover" fill="freeze" from="rgb(255,235,213)" to="rgb(245,247,255)"/>
      <animateColor attributeName="fill"   attributeType="CSS" dur="0.3s" begin="mouseout"  fill="freeze" from="rgb(245,247,255)" to="rgb(255,235,213)"/>
      <animateColor attributeName="stroke" attributeType="CSS" dur="0.3s" begin="mouseover" fill="freeze" from="rgb(255,131,9)"   to="rgb(56,76,198)"/>
      <animateColor attributeName="stroke" attributeType="CSS" dur="0.3s" begin="mouseout"  fill="freeze" from="rgb(56,76,198)"   to="rgb(255,131,9)"/>
    </rect>
  </a>
 
  <text class="menu" x="195" y="100">
    HADOKEN
    <animate attributeType="XML" attributeName="font-size" fill="freeze" from="13" to="18" dur="0.4s" begin="t1.mouseover"/>
    <animate attributeType="XML" attributeName="font-size" fill="freeze" from="18" to="13" dur="0.4s" begin="t1.mouseout"/>
    <animate attributeType="XML" attributeName="y"	   fill="freeze" from="100" to="101" dur="0.4s" begin="t1.mouseover"/>
    <animate attributeType="XML" attributeName="y"	   fill="freeze" from="101" to="100" dur="0.4s" begin="t1.mouseout"/>
  </text>
 
  <a xlink:href="" target="_top" >
    <rect class="menu" id="t2" x="50" y="80" width="90px" height="26px" rx="3.8px" ry="1.3px" onclick="bouge(10,0)" >    
      <animateColor attributeName="fill"   attributeType="CSS" dur="0.3s" begin="mouseover" fill="freeze" from="rgb(255,235,213)" to="rgb(245,247,255)"/>
      <animateColor attributeName="fill"   attributeType="CSS" dur="0.3s" begin="mouseout"  fill="freeze" from="rgb(245,247,255)" to="rgb(255,235,213)"/>
      <animateColor attributeName="stroke" attributeType="CSS" dur="0.3s" begin="mouseover" fill="freeze" from="rgb(255,131,9)"   to="rgb(56,76,198)"/>
      <animateColor attributeName="stroke" attributeType="CSS" dur="0.3s" begin="mouseout"  fill="freeze" from="rgb(56,76,198)"   to="rgb(255,131,9)"/>
    </rect>
  </a>
 
  <text class="menu" x="95" y="100">
    DEPLACEMENT
    <animate attributeType="XML" attributeName="font-size" fill="freeze" from="13" to="18" dur="0.4s" begin="t2.mouseover"/>
    <animate attributeType="XML" attributeName="font-size" fill="freeze" from="18" to="13" dur="0.4s" begin="t2.mouseout"/>
    <animate attributeType="XML" attributeName="y"	   fill="freeze" from="100" to="101" dur="0.4s" begin="t2.mouseover"/>
    <animate attributeType="XML" attributeName="y"	   fill="freeze" from="101" to="100" dur="0.4s" begin="t2.mouseout"/>
  </text>
 
  <circle onkeypress="tape1(evt)" cx="30" cy="50" opacity="0.7" r="25" fill="grey" stroke="white" stroke-width="3" />
 
  <image id="Bob" x="50" y="200" width="150px" height="180px" xlink:href="Bob/Bob1.png" style="position:absolute" />
 
  <g id="item">
    <rect id="Lifebar" x="60" y="30" width="250" height="25" fill="yellow" stroke="white" stroke-width="3"/>
    <text class="menu" x="90" y="50" style="font-size:24;font-family:Arial;fill:blue;font-weight:bold;"  stroke="url(#blancbleu)" stroke-width="1" >
    BOB    
    </text>
  </g>
 
  <g onkeypress="tape2(evt)">
  <text id="entre" x="32" y="55" style="text-anchor:middle;font-size:20;font-family:Arial;fill:red">?</text>
  </g>     
 
</svg>

07/04/2009, 17h43
E.Bzz

Citation:

Envoyé par RKOCOCO

Pour moi il n'y a rien qui pourrait empêcher le déplacement de l'image

Pour toi peut être, mais pour le navigateur, si.

Relis les réponses ....

A+
07/04/2009, 18h00
RKOCOCO

Je sais que ce n'est pas très malin d'écrire ce que j'ai écris, mais je me triture la tête dessus depuis ce matin. Je n'arrive vraiment pas à voir pourquoi ça bloque. Même si dans la fonction bouge je rajoute par exemple :

Code:

document.getElementById('cercle').style.fill = "blue";

Toujours rien ne se passe. Alors, soit j'ai vraiment du loupé quelque chose en programmation Javascript (ok je débute) mais quand même je pensais être sur de mon coup.....
08/04/2009, 09h21
E.Bzz

Et bien par exemple, à ma connaissance, la propriété CSS "fill" n'existe pas ...

Sinon

Citation:

Envoyé par E.Bzz

Mais encore faut-il que le CSS de l'image la définisse en position:absolute ou position:relative ...

Si tu n'as pas définit la "position" au sens CSS, ton image est en "position:inline" par défaut.
Elle est placée à l'endroit où se trouve son code HTML dans la page, et ces coordonnées ne sont pas modifiables. Essaye juste d'ajouter

Code:

style="position:relative;"

dans le tag HTML.
Même si, dans un premier temps, le résultat n'est pas celui attendu, tu devrais au moins la voir "bouger".

Dans le cas contraire, c'est que tu as une erreur JS qui bloque l'exécution de ton code ...

A+
08/04/2009, 10h47
RKOCOCO

Mmmmmh je en comprends pas. J'ai bien ajouté

Code:

style="position:relative;"

et l'image ne bouge pas. Pourtant le code exécute bien des fonction du script situées après la commande de déplacement de l'image. Il n'y a donc aps d'erreur JS qui bloquent mon programme......

J'ai essayé de passer par des classes en CSS. Le résultat est pire. Non seulement, l'image ne bouge pas mais elle ne prend même plus en compte les coordonnées que je lui mets en paramètre....sniff
08/04/2009, 10h50
SpaceFrog

heu non un objet ne bougera pas en relatif ..;
il doit etre en absolute ...
08/04/2009, 10h55
E.Bzz

Citation:

Envoyé par SpaceFrog

heu non un objet ne bougera pas en relatif ..;
il doit etre en absolute ...

Si si (vérifié) : dans ce cas, les coordonnées représentent un déplacement "relatif" par rapport à sa position par défaut (bien qu'il soit "dans le flux"). Sinon, quelle serait la différence par rapport à "inline" ? :koi:

A+
08/04/2009, 11h15
Bovino

Citation:

Envoyé par E.Bzz

Si si (vérifié) : dans ce cas, les coordonnées représentent un déplacement "relatif" par rapport à sa position par défaut (bien qu'il soit "dans le flux"). Sinon, quelle serait la différence par rapport à "inline" ? :koi:

A+

absolute : sortie du flux, positionnement par rapport à la page;
relative : reste dans le flux mais avec décalage de la position normale
inline : n'est pas une valeur de position mais de display ;) la valeur par défaut de position, c'est static !

arf oui :red:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type='text/javascript'>
val =0
function move(){
//var timer= setInterval( function(){truc.style.top=(val<50)?((val++)+'px'):((clearInterval(timer))?0:truc.style.top);},100 ) ;
var timer= setInterval( function(){truc.style.top=(val<50)?((val++)+'px'):(timer=50)+'px';},10 ) ;
}
</script>
</head>
 
<body onload="truc=document.getElementById('foo');move()">
<div style="position:absolute;left:522px;">
<div style='width:100px;background-color:red;position:relative;' id="foo">s</div>
</div>
</body>

08/04/2009, 11h26
E.Bzz

Citation:

Envoyé par Bovino

inline : n'est pas une valeur de position mais de display ;) la valeur par défaut de position, c'est static !

Au temps pour moi :king:
08/04/2009, 11h31
RKOCOCO

J'ai trouvé le problème, désolé de vous avoir sollicité autant.
Sous SVG il faut utiliser

Code:

document.getElementById("Bob").setAttribute("y", hautimage);

et non pas

Code:

document.getElementById("Bob").style.top = hautimage;

Mais je me paume un peu entre les API SVG, CSS et JS......Enfin voila, mon problème est réglé et je me coucherai moins con ce soir :mrgreen:
08/04/2009, 11h32
SpaceFrog

faut surtout rajouter +'px' non ?
08/04/2009, 13h32
RKOCOCO

En fait ça n'as pas d'incidence sur mon programme. Il doit mettre px par defaut en valeur