Javascript Déplacement d'image

Version imprimable

Bonjour à tous,

je suis tout débutant en javascript.

J'ai besoin de faire déplacer une image sur ma page, j'ai écrit une fonction qui est appelée par un bouton:

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
<head>
<SCRIPT LANGUAGE=JavaScript>
 
function bougeauto2()
    {
    if(document.getElementById)
        {for(compteur=1;compteur<400;compteur++){
        hautimage ++;
        gaucheimage ++;
        document.getElementById("smile").style.top = hautimage;
        document.getElementById("smile").style.left = gaucheimage;
 
                                                }
        }
     }
 
</SCRIPT>
 
 
</SCRIPT>
</HEAD>
<Body>
 
<SCRIPT LANGUAGE="javascript">
var hautimage = 100;
var gaucheimage = 100;
document.write('<IMG SRC="Nénuphars.jpg" height=100  width=150 ID=smile STYLE="position:absolute;top:'+hautimage+';left:'+gaucheimage+'">');
</SCRIPT>
</body>

L'image se déplace bien mais tellement rapidement que ça ne donne rien d'intéressant. J'ai donc modifié mon script comme suit:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<head><SCRIPT LANGUAGE=JavaScript>
function bougeauto2()
    {
     if(document.getElementById)
      {
        hautimage ++;
        gaucheimage ++;
      if (gaucheimage < 400)
         {setTimeout('bougeauto2()', 200);}
}
 
</SCRIPT>
</HEAD>
<Body>
 
<SCRIPT LANGUAGE="javascript">
var hautimage = 100;
var gaucheimage = 100;
document.write('<IMG SRC="Nénuphars.jpg" height=100  width=150 ID=smile STYLE="position:absolute;top:'+hautimage+';left:'+gaucheimage+'">');
</SCRIPT>
</body>

Avec cette modification, ça ne marche pas, l'image ne se déplace pas du tout... Il y a bien entendu une erreur mais je ne la trouve pas.
Si vous pouvez m'aider SVP

Merci d'avance
Philippe

Bonjour,

Un des if n'est pas fermé "}".

Et vous avez oubliez ceci:
Code:

1 2 3 document.getElementById("smile").style.top = hautimage; document.getElementById("smile").style.left = gaucheimage;

Citation:
Envoyé par vermine
Bonjour,

Un des if n'est pas fermé "}".

Et vous avez oubliez ceci:
Code:

1 2 3 document.getElementById("smile").style.top = hautimage; document.getElementById("smile").style.left = gaucheimage;
+1

Et les variables ne sont pas initialisées : tu ++ quoi ??

De plus, mieux vaudrait un setInterval qu'un setTimeout avec appel récursif
Code:

1 2 3 4 5 6 7 8 9 10 11 var hautimage = 0; var gaucheimage = 0; function bougeauto2() { if (document.getElementById && gaucheimage < 400) { hautimage ++; gaucheimage ++; document.getElementById("smile").style.top = hautimage + "px"; document.getElementById("smile").style.left = gaucheimage + "px"; } }
avec

Code:

<body onload="setInterval('bougeauto2()', 200);">

A+

09/12/2009, 14h34
SpaceFrog

des images qui bougent ?

http://www.developpez.net/forums/d84...r-chute-neige/
09/12/2009, 14h39
E.Bzz

[HS]

Citation:

Envoyé par SpaceFrog

des images qui bougent ?

http://www.developpez.net/forums/d84...r-chute-neige/

:ave:

C'est la première fois que je ne trouve pas ce genre d'animation ridicule :ccool:

Bravo !

[/HS]

A+

Merci à tous pour votre aide, les 2 "if" me semblent bien fermés (le second est inbriqué dans le premier (c'est peut être interdit en JS ?)
Code:

1 2 3 4 5 6 7 8 9 10 11 <head><SCRIPT LANGUAGE=JavaScript> function bougeauto2() { if(document.getElementById) { hautimage ++; gaucheimage ++; if (gaucheimage < 400) {setTimeout('bougeauto2()', 200);} } }
Les variables sont initialisées entre les balises body.

Je vais essayer vos solutions. Merci de me montrer ou est mon erreur dans la fermeture des If

Cordialement
A+ Philippe

09/12/2009, 15h41
vermine

Le code que vous venez de nous remettre ici avec les couleurs n'est pas le même que celui que vous nous avez donné dans le premier post. :)

On va donc dire que c'est une erreur de copier coller et que la dernière accolade a été perdue en chemin. ;)
09/12/2009, 15h47
filtep

En effet c'est une erreur de copier-coller, donc avec l'accolade effectivement présente dans le code, il ne fonctionne pas, j'ai essayé le "Setinterval..." celà
ne marche pas non plus, PS les 2 lignes "document.getelement...etc" sont bien présentes dans le code d'origine, comme le problème ne vient pas de là je les avais exclues du copier coller...

Ou celà cloche t il ?

A+
Philippe
09/12/2009, 15h51
vermine

Donnez-nous le code sans enlever des éléments car la partie que vous nous avez donné au début plus les trois petits ajouts dont je parle suffisent pour faire bouger l'image. :P

un petit exemple didactique:

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 2</title>
<script language="Javascript">
var timer;
var position= new Array(2);
var MyWay;
 
function movearound(thisway)
{ 
position[0] = parseInt(document.getElementById('MyDiv').style.top);
position[1] = parseInt(document.getElementById('MyDiv').style.left); 
 
switch(thisway)
{
case "up":
   position[0] -= 2;
   break;
 
case "do":
   position[0] += +2;
   break;
 
case "le":
   position[1] -= 2;
   break;
case "ri":
   position[1] += +2;
   break;
}
 
 
document.getElementById('MyDiv').style.top = Number(position[0]); 
document.getElementById('MyDiv').style.left = Number(position[1]);
} 
 
</script> 
<style >
input {font-family: 'symbol';}
</style>
</head>
 
 
<body>
<div id="MyDiv" style="width: 39; height: 20; top:0; left:0; background-color: blue; position: absolute; z-index:-1;" ></div> 
 
 
  <table border="0" style="cellpadding:0; cellspacing:0; " width="90">
    <tr>
      <td width="33%"></td>
      <td width="33%"><input type="button" name="up" width=this.height value="Ý" onClick="a=this.name; clearInterval(timer); timer=setInterval('movearound(a)',10);" ; / / / /></td>
      <td width="34%"></td>
    </tr>
    <tr>
      <td width="33%"><input type="button" name="le" width="100" value="Ü" onClick="a=this.name; clearInterval(timer); timer=setInterval('movearound(a)',10);" /></td>
      <td width="33%"><input type="button" width="100" value="&#128;" onClick="clearInterval(timer);" /></td>
      <td width="34%"><input type="button" name="ri" width="100" value="Þ" onClick="a=this.name;clearInterval(timer); timer=setInterval('movearound(a)',10);" /></td>
    </tr>
    <tr>
      <td width="33%"></td>
      <td width="33%"><input type="button" name="do" width="100" value="ß" onClick="a=this.name;clearInterval(timer); timer=setInterval('movearound(a)',10);" /></td>
      <td width="34%"></td>
    </tr>
  </table>
 
</html>

09/12/2009, 15h56
E.Bzz

Citation:

Envoyé par filtep

Ou celà cloche t il ?

A mon niveau sûrement :aie:

Voir le code corrigé (j'avais pas repris la correction de Vermine) :mrgreen:

Sinon,

Code:

if (document.getElementById("smile"))

serait peut être préférable ...

A+

Bon, avant tout excusez mon manque de clarté mais je débute...

Voici le code initial INTEGRAL:

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
<HTML>
<HEAD>
 
<SCRIPT LANGUAGE=JavaScript>
function bouge(x,y)
    {
    if(document.getElementById)
        {
        hautimage += y;
        gaucheimage += x;
        document.getElementById("smile").style.top = hautimage;
        document.getElementById("smile").style.left = gaucheimage;
        }
    }
 
</SCRIPT>
 
 
<SCRIPT LANGUAGE=JavaScript>
function bougeauto2()
    {
     if(document.getElementById)
      {
        hautimage ++;
        gaucheimage ++;
        document.getElementById("smile").style.top = hautimage;
        document.getElementById("smile").style.left = gaucheimage;
      if (gaucheimage < 400)
         {setTimeout('bougeauto2()', 200);}
 
}
 
</SCRIPT>
</HEAD>
<Body>
 
<body onload="setInterval('bougeauto2()', 200);">
 
<SCRIPT LANGUAGE="javascript">
var hautimage = 100;
var gaucheimage = 100;
document.write('<IMG SRC="Nénuphars.jpg" height=100  width=150 ID=smile STYLE="position:absolute;top:'+hautimage+';left:'+gaucheimage+'">');
</SCRIPT>
 
<FORM>
<INPUT TYPE=button VALUE=gauche onClick="bouge(-10,0)">
<INPUT TYPE=button VALUE=droite onClick="bouge(10,0)">
<INPUT TYPE=button VALUE=haut onClick="bouge(0,-10)">
<INPUT TYPE=button VALUE=bas onClick="bouge(0,10)">
<INPUT TYPE=button VALUE=AUTO onClick=<HTML>
</form>
 
 
 
 
</BODY>
</HTML>

Ceci est un code que j'ai trouvé dans un cours en ligne que je cherche à adapter pour apprendre.

Merci de votre patience;)

A+
Philippe

09/12/2009, 16h47
vermine

Je maintiens qu'il manque une accolade dans bougeauto2. :)

En effet, il y a même plein de bêtises dans ce code, c'est à cause des modifications multiples que j'ai tentées et comme j'utilise le bloc-note (je n'ai pas d'éditeur JS).

J'ai corrigé, testé et ça marche. Je met le code qui fonctionne si ça peut aider un autre débutant.

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
<HTML>
<HEAD>
 
<SCRIPT LANGUAGE=JavaScript>
function bouge(x,y)
    {
    if(document.getElementById)
        {
        hautimage += y;
        gaucheimage += x;
        document.getElementById("smile").style.top = hautimage;
        document.getElementById("smile").style.left = gaucheimage;
        }
    }
 
</SCRIPT>
 
 
<SCRIPT LANGUAGE=JavaScript>
function bougeauto2()
    {
     if(document.getElementById)
      {
        hautimage ++;
        gaucheimage ++;
        document.getElementById("smile").style.top = hautimage;
        document.getElementById("smile").style.left = gaucheimage;
      if (gaucheimage < 400)
         {setTimeout('bougeauto2()', 100);}
 
}}
 
</SCRIPT>
</HEAD>
<Body>
 
 
<SCRIPT LANGUAGE="javascript">
var hautimage = 100;
var gaucheimage = 100;
document.write('<IMG SRC="Nénuphars.jpg" height=100  width=150 ID=smile STYLE="position:absolute;top:'+hautimage+';left:'+gaucheimage+'">');
</SCRIPT>
 
<FORM>
<INPUT TYPE=button VALUE=gauche onClick="bouge(-10,0)">
<INPUT TYPE=button VALUE=droite onClick="bouge(10,0)">
<INPUT TYPE=button VALUE=haut onClick="bouge(0,-10)">
<INPUT TYPE=button VALUE=bas onClick="bouge(0,10)">
<INPUT TYPE=button VALUE=AUTO onClick="bougeauto2()">
</form>
 
 
 
 
</BODY>
</HTML>

Encore merci à tous et à très bientôt sans aucun doute.

A+
Philippe