Animation Dynamique !
Déplacez votre souris sur la bouteille !
Eloignez-la de nouveau !
Etes-vous Prêts à Créer le Même Effet ?
Après cette leçon, vous pourrez :
Note : Si vous n'avez pas les documents des leçons précédentes, téléchargez une copie maintenant.
Dans cette leçon, nous allons vous montrer comment créer un effet que vous avez sûrement déjà vu sur d'autres sites web -- une image incluse changeant quand vous déplacez votre souris dessus ou que vous cliquez dessus. Pour l'exemple ci-dessous, la flêche "gonfle" quand la souris se déplace dessus et elle prend une apparence "aplatie" quand vous cliquez dessus :
Une fois que le bouton est "cliqué", vous devez Recharger cette page dans votre navigateur pour le réinitialiser.
L'utilisation la plus courante de cette technique est d'animer des images hyperliens se comportant comme des boutons, De sorte que l'internaute est un peu plus convaincu que l'objet sous la souris vaut la peine d'être cliqué.
Bien que vous soyez libre d'utiliser ce que apprenez dans cette leçon pour faire sauter et bondir vos boutons, notre intime conviction est que cela n'ajoute rien à l'information de la page ; notre exemple décrira donc une utilisation un peu plus digne de cet effort.
Gardez également à l'esprit un autre facteur : pour chaque image que vous voulez transformer quand la souris passe dessus, vous devez réellement télécharger 2 images différentes et, comme vous le verrez bientôt, cela doit se faire avant que le code HTML de la page soit chargé. Cela peut donc allonger le précieux temps d'attente pendant lequel l'internaute voit un écran blanc.
La manière dont la permutation d'image fonctionne est à peu près la suivante :
NOTE : Pour marcher correctement, les images permutant entre elles doivent avoir des hauteurs et largeurs semblables.
Ci-dessous, vous trouverez une méthode générique pour la permutation de boutons. Celle que nous avons utilisée dans cette page comporte quelques fonctionnalités supplémentaires que nous vous encourageons à explorer en étudiant le code HTML source de cette leçon.
| Permutation d'Images JavaScript | |
|---|---|
| code HTML | explication |
|
Début typique d'un fichier HTML standard contenant des fonctions JavaScript dans la section <HEAD>...</HEAD>. |
if (document.images) { |
Ceci est un test pour déterminer si le navigateur web supporte les fonctions de stockage d'images nécessaires pour la permutation. Si ce test est faux, nous ignorons le reste du code et affichons une image statique. |
var button1_up = new Image(); button1_up.src = 'button_up.gif"; |
Nous créons une variable dont le type correspond aux Images. La deuxième ligne assigne la propriété src de la version "haut" de l'image au chemin du premier fichier. |
var button1_over = new Image(); button1_over.src = 'button_over.gif"; |
Nous créons maintenant une seconde variable Image qui assigne la propriété src de la version "sur" de l'image à l'autre fichier image. |
function over_button() {
if (document.images) {
document["buttonOne"].src = button1_over.src
}
}
|
Cette fonction, quand on l'appelle, vérifie de nouveau que le navigateur supporte la permutation d'images. Si c'est le cas, elle regarde dans la liste interne d'images stockée dans l'objet document et assigne à cet objet la variable représentant l'image pour la version "sur" (quand la souris est sur l'image). |
function up_button() {
if (document.images) {
document["buttonOne"].src = button1_up.src
}
}
|
Cette fonction est pratiquement la même, mais elle affiche de nouveau l'image version "haut". |
//--> </SCRIPT> <body> : : : |
Fin du JavaScript et continuation du HTML pour afficher le contenu de la page. |
<A HREF="fichier.html"
onMouseOver="over_button()"
onMouseOut="up_button()">
<img src="button_up.gif" alt="cliquez-moi"
width="XX" height="YY" name="buttonOne"
border=0>
</a>
|
Le tag est utilisé pour charger la première image (la version "haut"). Notez que nous avons donné à l'image à l'intérieur du tag <img...> un nom unique, "buttonOne", que nous pouvons appeler en utilisant du code comme document["button name"]. Le tag hyperlien contient un contrôleur d'événements JavaScript, onMouseOver, qui appellera notre fonction pour afficher l'image version "sur" ("OVER") quand la souris est sur l'image. De la même façon, l'évènement onMouseOut appellera notre autre fonction pour remplacer de nouveau l'image quand la souris quitte ("moves OUT") la zone de l'image. |
Maintenant, nous allons voir comment cela marche dans notre exemple de web volcan. Plutôt que d'animer simplement des boutons, nous allons simuler un microscope !
Dans notre Introduction, nous allons ajouter une nouvelle section décrivant les roches volcaniques, et y inclure l'image d'une variété appelée "pierre ponce". Nous allons utiliser le JavaScript pour remplacer l'image par une autre montrant une coupe d'une pierre ponce vue au microscope. En déplacant la souris sur et en dehors de l'image, nous pouvons comparer les deux vues différentes (ok, nous admettons que ce n'est pas beaucoup plus créatif que l'animation de boutons et qu'on arrive au même résultat en plaçant les images côte-à-côte...)
<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.images) {
var pum1 = new Image();
pum1.src = "../pictures/pumice.gif";
var pum2 = new Image();
pum2.src = "../pictures/pumice2.gif";
}
function show_rock() {
if (document.images) {
document["pum"].src = pum2.src;
}
}
function hide_rock() {
if (document.images) {
document["pum"].src = pum1.src;
}
}
//-->
</SCRIPT>
NOTE : Nous avons créé deux variables JavaScript représentant les deux images. Nous appellerons la fonction show_rock() pour afficher l'image de la vue au microscope, pumice2.gif, et la fonction hide_rock() pour repasser à l'image originale. Ces événements sont définis pour une image appelée "pum" que nous décrirons plus loin dans le code HTML.
celles observées par les humains.nous allons ajouter une nouvelle section sur les Roches Volcaniques. Elle contiendra l'image de la Pierre Ponce ainsi que le code pour la permutation d'images avec JavaScript :
<h3 align=center>Roches Volcaniques</h2>
Les scientifiques étudient les roches à différentes échelles.<p>
<b>La Pierre Ponce</b> est une sorte de roche formée par des éruptions volcaniques
<A HREF="intro.html"
onClick="alert('Déplacez la souris sur la roche pour voir une vue en grossissement.');
return false"
onMouseOver="show_rock(); window.status='description du dynamisme explosif';
return true"
onMouseOut="hide_rock()">
<IMG SRC="../pictures/pumice.gif" align=right ALT="photo de Pierre Ponce"
WIDTH="220" HEIGHT="170" hspace=12 vspace=12 name="pum" border=0></A>
très explosives. De la terre en fusion, du <b>magma</b> bouillonnant
refroidit rapidement en emprisonnant de nombreuses bulles d'air pour fomer une structure très légère.
<p>
Si vous déplacez votre souris sur l'image, vous pourrez voir l'aspect de la Pierre Ponce sous un microscope.
<p>
Une <b>lamelle</b> est une couche de roche coupée si finement que la lumière d'un microscope passe à travers,
nous révélant ainsi la structure de la roche.
<p>
Les chambres tordues que l'on voit représentent les poches d'air prisonnier à l'intérieur de la pierre
quand elle a été projetée hors du volcan.
<br clear=right>
NOTE : Regardez attentivement le code du tag <img...>. Il est de plus en plus complexe ! Il prend maintenant en charge les actions "mouseOver", affiche un message dans la barre d'état (comme nous l'avons vu dans la leçon 27a), et fera apparaître un message d'alerte dans le cas oû l'internaute clique sur l'image (en restant dans la même page). L'image est également alignée à droite et est entourée d'une bordure supplémentaire réalisée avec les attributs (hspace et vspace)
Comparez vos pages web avec cet exemple du document-type. Si vos pages sont différentes de l'exemple ou que les liens hypertexte ne fonctionnent pas correctement, vérifiez le texte que vous avez tapé dans l'éditeur de texte. Souvenez-vous que le JavaScript est très sensible aux fautes de frappe -- un guillemet ou un point-virgule manquants peuvent détruire votre page ! Vérifiez que vous n'avez pas de caractères RETOUR CHARIOT supplémentaires dans vos commandes JavaScript.
Revoyons les grandes lignes de cette leçon :
Trouvez quelques images que vous pouvez utliser pour faire de la permutation ; souvenez-vous qu'elles doivent être exactement de la même taille ! utilisez votre code pour créer le méme effet dans vos propres pages. Que faudrait-il faire pour pouvoir changer deux images différentes comme cela ? Pourquoi cette approche serait-elle moins envisageable si votre page avait 10 images actives à permuter ?
Notez que vous pouvez aussi écrire des fonctions JavaScript pour gérer d'autres évènements générés par un clic de souris :
<a href="file.html" onMouseOver="over_button()" onMouseOut="up_button()" onClick="doButtonClick()"> <img src="button_up.gif" alt="cliquez-moi" width="XX" height="YY" name="buttonOne" border=0> </a>
si vous avez, bien sûr, ajoutÈ une fonction JavaScript dans votre section <HEAD>...</HEAD> pour réagir à cet évènement
Il est temps d'égayer les choses avec quelques FORMulaires interactifs...
Ecrire le HTML : Leçon 27d : Une 'tite Dose de JavaScript : Permuter des Images
©1994-2003
Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
La 'net connection (en anglais) à MCLI est
Alan Levine
Suggestions en Français à Bernard Bensoussan
URL: http://www.mcli.dist.maricopa.edu/tut/tut27d.html