Javascript Déplacement d'image

**filtep** · 09/12/2009, 13h38

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 :

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

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

**vermine** · 09/12/2009, 13h44

Bonjour,

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

Et vous avez oubliez ceci:

Code :

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

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

**E.Bzz** · 09/12/2009, 14h06

Envoyé par vermine

Bonjour,

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

Et vous avez oubliez ceci:

Code :

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

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 :

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

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 :

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

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

A+

**SpaceFrog** · 09/12/2009, 14h34

des images qui bougent ?

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

**E.Bzz** · 09/12/2009, 14h39

[HS]

Envoyé par SpaceFrog

des images qui bougent ?

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

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

Bravo !

[/HS]

A+

**filtep** · 09/12/2009, 15h33

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 :

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

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

**vermine** · 09/12/2009, 15h41

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.

**filtep** · 09/12/2009, 15h47

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

**vermine** · 09/12/2009, 15h51

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.

**SpaceFrog** · 09/12/2009, 15h54

un petit exemple didactique:

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

**E.Bzz** · 09/12/2009, 15h56

Envoyé par filtep

Ou celà cloche t il ?

A mon niveau sûrement

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

Sinon,

Code :

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

if (document.getElementById("smile"))

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

A+

**filtep** · 09/12/2009, 16h13

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

Voici le code initial INTEGRAL:

Code HTML :

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

**vermine** · 09/12/2009, 16h47

Je maintiens qu'il manque une accolade dans bougeauto2.

**filtep** · 09/12/2009, 17h06

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 :

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

Javascript Déplacement d'image

JavaScript

Discussions similaires

Partager

Partager