Tutoriels de DHTML > Faire bouger un objet sur la page [ L'éditeur JavaScript ]

Fermer

Visiteur non-identifié | Identifiez-vous | Devenir membre
Code perdu ? | Combien de visiteurs sur votre site ?

Déplacer un objet sur une page

Le DHTML 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.

Annotations des visiteurs :

De crioucriou - le 14-05-2005

le lien Commentcamarche.net ne fonctinne pas
merci pour ce site tres instructif....

De andre260 - le 15-08-2005

oui effectivement
ereur sur la page dommage!!

De andre260 - le 15-08-2005

oui effectivement
ereur sur la page dommage!!

De fastfood5 - le 02-01-2006

Ah bon? Avec moi, le lien marche...

De alex55 - le 18-03-2006

Ben oui c'est parfait... ??

De misfu - le 25-03-2006

Une autre introduction très complète sur le JavaScript est visible ici :
http://www.misfu.com/static/Javascript/intro.html

De Saturnin Dranac - le 12-11-2007

Les cours ici me paraissent un peu vieillots.
misfu je regarderai ton cours pour voir si ça me convient un peu plus.
sinon c'est vrai que le lien vers comment ça marche amène sur la page principale de comment ça marche au lieu de conduire directement au cours de JavaScript de leur site

>> Poster une annotation sur ce cours

Les autres cours :

Faire disparaitre un objet sur une page >|

compteur gratuit
actuellement en ligne

PUBLICITE

ANNUAIRE WEBMAST.

Wedoo
La plus connue des top-lists.
http://fr.wedoo.com

Cat : Cercles de sites
Voir l'annuaire webmaster

LES SCRIPTS :

78 à éditer
68 à copier/coller
247 des membres
2580 sur le web
>> Tous les scripts

LES MEMBRES :

61263 membres
7174 comptes CountUs
1719 comptes myCircle

LES FORUMS :

14 forums
39936 topics
190879 messages
>> Les forums

SONDAGE

La mini-astuce "Graphisme / Présentation" du jour par feidakin
Vous désirez centrer votre animation Flash, malheusement cela modifie souvent l'aspect de la page . il suffit de mettres les balises <center></center> entre les paramètres de l'animation, et le tour est joué.
Proposer votre mini-astuce | Archives des mini-astuces

Pseudo :
Code :
	Se souvenir de moi