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

Javascript Déplacement d'image

JavaScript

Vue hybride

Discussions similaires

Partager

Partager