|
|
 |
 |
 |
|
 |
|
 |
|
|
|
|
|
1. Déplacer une image de
manière dynamique : le tutorial
L'objectif de ce tutorial est de déplacer une image à
travers une page à l'aide de boutons de direction.
Pour cela, on insérera une image au sein de la page et on mettra
en place un formulaire avec 4 boutons pour le déplacement de
l'image.
- Insertion de l'image :
On place une balise <img> au sein de notre page html :
<img src="../img/dhtml/button.gif"
width="70" height="24" border="0">
Pour pouvoir rendre cet élément dynamique, nous allons
lui passer quelques paramètres en Javascript :
<script language="javascript">
var hautimage = 100;
var gaucheimage = 100;
document.write('<img src="../img/dhtml/button.gif" width="70"
height="24" border="0" id="box" 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 dans notre page.
Nous donnons un ID a notre image (box),
ce qui permettra ensuite de s'y référer et d'agir sur
cet élément.
Nous avons aussi défini 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. |
 |
- Création du formulaire
:
Mettons désormais en place un formulaire avec 4 boutons qui
permettront de déplacer l'image.
Nous allons utiliser des boutons personnalisés à la
place des boutons traditionnels d'un formulaire.
On utilise pour cela la balise <input type="image">
<form>
<input type="image" src="../img/dhtml/gauche.gif"
value="gauche">
<input type="image" src="../img/dhtml/droite.gif"
value="droite">
<input type="image" src="../img/dhtml/haut.gif"
value="haut">
<input type="image" src="../img/dhtml/bas.gif"
value="bas">
</form>
- Création d'une fonction en Javascript :
Pour assurer la gestion des déplacements dans toutes le directions,
il faut créer une fonction Javascript; cette fonction sera
ensuite appelée avec l'évênement onClick
sur les boutons.
Voici la fonction :
<SCRIPT LANGUAGE=JavaScript>
function deplace(x,y)
{
if(document.getElementById)
{
hautimage += y;
gaucheimage += x;
document.getElementById("box").style.top = hautimage;
document.getElementById("box").style.left = gaucheimage;
}
}
</SCRIPT>
|
|
Explications détaillées :
<SCRIPT LANGUAGE=JavaScript>
function bouge(x,y)
{
Nous créons donc une fonction que nous nommons deplace.
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;
On ajoute aux variables hautimage et gaucheimage (qui definissent
les coordonnées de notre image), le déplacement demandé
(celui passé en paramètre lors de l'appel de la fonction).
document.getElementById("box").style.top
= hautimage;
document.getElementById("box").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 box (objet
dont l'ID est box).
}
}
</SCRIPT>
On referme les accolades, et la balise <SCRIPT>.
|
|
-Appel de fonction dans
le formulaire :
<form>
<input type="image" src="../img/dhtml/gauche.gif"
value="gauche" onClick="deplace(-30,0)">
<input type="image" src="../img/dhtml/droite.gif"
value="droite" onClick="deplace(30,0)">
<input type="image" src="../img/dhtml/haut.gif"
value="haut" onClick="deplace(0,-30)">
<input type="image" src="../img/dhtml/bas.gif"
value="bas" onClick="deplace(0,30)">
</form>
Quand le bouton droite est cliqué, la fonction deplace(30,0)
est lancé, ce qui provoquera le déplacement de l'image
de 30 pixels sur l'axe horizontal, et 0 pixel sur l'axe vertical.
|
| |
2. Voir le résultat
|
 |
|
|
| |
   |
| |
|
|
|
 |
|
 |
|
|
 |
|
 |
|
Recherche
par
mots-clés : |
|
|
|
 |
|
 |
|
|
|
|
|
|
|
|
|
