Déplacer un objet sur une page en script




Le HTML parait toujours compliqué au premier coup d'oeil. En fait quand on s'y plonge deux minutes, tout devient très vite très simple ! Commençons par définir ce que nous désirons faire :
Une image que l'on peut déplacer à sa guise sur la page grâce a des boutons.

De quoi sera composée notre page ? D'une image tout d'abord. Nous savons que celle-ci sera un élément dynamique car elle aura pour objet de se déplacer sur la page. Notre page accueillera aussi un formulaire avec 4 boutons pour le déplacement de l'image.

L'image :


Nous allons commencer par implanter un tag HTML "<IMG>" de base dans notre page :

<IMG SRC="smile.gif">


Pour pouvoir rendre cet élément dynamique, nous allons lui passer quelques paramètres :

<SCRIPT LANGUAGE="javascript">
var hautimage = 100;
var gaucheimage = 100;
document.write('<IMG SRC="../images/exemple/smilee.gif" ID=smile STYLE="position:absolute;top:'+hautimage+';left:'+gaucheimage+'">');
</SCRIPT>


Ce code est bien entendu à placer entre <BODY> et </BODY> car il s'agit d'un element du corps de la page.
Nous créons deux variables, hautimage et gaucheimage, qui définirons l'emplacement de notre image.
Nous donnons un ID a notre image (smile), ce qui permettra ensuite de s'y referer. Nous avons aussi defini des styles :
- L'attribut position : Il peut prendre deux valeurs : absolute et relative. Pour pouvoir déplacer notre image, il faut absolument que nous definissions position comme absolute, ce qui signifie que notre image va se placer suivant des coordonnées absolues et non suivant son emplacement dans le code HTML de notre page.
- L'attribut top : top défini la distance entre le bord supérieur de votre image et le haut du navigateur. Avec top:100, nous plaçons donc l'image à 100 pixels du haut du navigateur.
- L'attribut left : il défini la distance entre le bord gauche du navigateur et l'image. Avec left:100, l'image sera à 100 pixels du bord gauche du navigateur.

Le formulaire :


Nous allons maintenant placer un formulaire qui va permettre de "piloter" l'image :

<FORM>
<INPUT TYPE=button VALUE=gauche>
<INPUT TYPE=button VALUE=droite>
<INPUT TYPE=button VALUE=haut>
<INPUT TYPE=button VALUE=bas>
</FORM>


Une fonction qui fait tout !


Nous allons maintenant créer une fonction qui va gerer tous les déplacements de notre image. Cette fonction sera ensuite appelée au clic sur les boutons.

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


Explication ligne par ligne :

<SCRIPT LANGUAGE=JavaScript>
function bouge(x,y)

{

Nous créons donc une fonction que nous nommons bouge. Cette fonction acceptera le passage en paramètre de deux variables, x et y. x correspondera au déplacement demandé en X (horizontal) et y, le déplacement vertical.

if(document.getElementById)
        {

Il s'agit là d'un test de compatibilité. Les instructions placées entre les accolades ne seront executées que si le navigateur reconnait l'objet document.getElementById (IE 5 et +, NN6 et +).

        hautimage += y;
        gaucheimage += x;

Ces deux lignes ne sont difficiles à comprendre : nous ajoutons aux variables hautimage et gaucheimage (qui definisse les coordonnées de notre image), le déplacement demandé (celui passé en paramètre lors de l'appel de la fonction).

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

Ce sont ces deux lignes qui ordonnent le déplacement de l'image, simplement en changeant les attributs de style de l'objet smile (objet dont l'ID est smile).

        }
    }
</SCRIPT>

On referme les accolades, et la balise <SCRIPT>.

Il ne reste plus qu'à lancer tout ca !


Reprennons notre formulaire, et ajoutons les appels de fonction :

<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)">
</FORM>


Par exemple, quand le bouton droite est cliqué, la fonction bouge(10,0) est lancé, ce qui provoquera le déplacement de l'image de 10 pixels sur l'axe horizontal, et 0 pixel sur l'axe vertical.

Résultat :
Cliquez ici pour voir le résultat.

Retour

 Copyright (Le Ciel de Françoise) © 2005, tous droits réservés