Les Boutons animés

• Principe
• Comment ça marche
• Première méthode 
• Deuxième méthode 

Principe

Le principe du bouton animé, est de donner une impression de transformation visuelle du bouton lorsque la souris passe dessus puis lorsqu'elle s'en va. A ne pas confondre avec les images animées qui changent toutes seules sans que rien ne se passe (Gif Animés).
Cela donne une certaine anumation au site, le rend plus vivant, moin statique. Toute la qualité de l'animation réside bien sûr dans la qualité graphique des images qui seront utilisées.
Le principe de base est simple :
Au départ, une image représentant un bouton est affichée. Lorsque la souris passe dessus, cette image est remplacée par une autre image, déjà chargée en mémoire. Puis lorsque la souris quitte le bouton (sans avoir cliqué dessus), le bouton reprend son apparence première, en affichant l'image d'origine.
 
 
 
 
 

Il faut bien entendu disposer de deux images de même taille de préférence. L'une représentant un état différent de l'autre.
Au chargement de la page web, la première image est affichée en même temps que sa remplaçante est chargée en mémoire, mais pas affichée.
Une fonction JavaScript se charge de remplacer la première image par la seconde.
L'événement déclanchant est en général le passage de la souris sur l'image. On utilise pour celà le gestionnaire dévénement JavaScript onMouseOver() (lorsque la souris passe dessus).
Le deuxième événement qui remet les choses dans l'ordre initial, se produit lorsque la souris quitte la zone de l'image. On utilise pour celà le gestionnaire dévénement JavaScript onMouseOut() (lorsque la souris quitte l'image).

Il y a plusieurs méthodes pour arriver à cette fin. Elles ont chacune leurs avantages et leurs inconvénients.
Les plus simples à mettre en oeuvre sont es moins souples, et les plus souples sont plus compliquées à mettre en oeuvre.
Selon vos besoins, vous choisirez d'utiliser l'une ou l'autre de ces méthodes. Une fois le principe compris, seule votre talent de grraphiste pourra mettre des limites à la qualité de vos animations.

Nous allons voir les plus utilisées.
 
 

Cette méthode simple à mettre en oeuvre, a l'inconvénient de faire référence d'une manière fixe à l'objet "images" que vous placez dans la page HTML. Ce qui signifie que si vous déplacez cet image dans votre page, pour la mettre à un autre endroit, après d'autres images, plus loin ou avant, votre programmation sera à refaire.
Mais si vous ne changez jamais l'ordre des images de votre page, c'est une méthode simple et efficace.

La procédure à écrire pour changer l'image par une autre est a suivante : les // (1), // (2), etc., reportent à des commentaires dans cette page, et NE SONT PAS à inclure dans votre code...

<script type="text/javascript">  // (1)

function afficheimage (adresseimage) {  // (2)

document.images[0].src = adresseimage;  // (3)
}

</script>

Commentaires sur la fonction :
// (1)
notez qu'on peut écrire Language ="JavaScript" ou  type="text/javascript". Cette deuxième forme est plus récente que la première qui a tendance à être abandonnée petit à petit.
// (2)
on définit la fonction afficheimage et on lui passe adresseimage comme paramètre. Dans  adresseimage , il devra y avoir l'adresse physique où le navigateur pourra trouver l'image en question.
// (3)
on donne à la propriété .src de l'objet images[0] la valeur  adresseimage , qui contient l'adresse de l'image à afficher. Notez les "[" et "]" qui sont des crochets, et pas des accolades ou des parenthèses. On les obtient en appuyant sur la touche AltGr du clavier, et tout en la maintenant enfoncée, en appuyant sur la touche "5" ou ")" en haut du clavier (pas dans le pavé numérique).

Le Navigateur, lorsqu'il emmagasine des objets en mémoire avant de les afficher, les range dans des zones de mémoire (un peu comme dans les tiroirs d'un semainier, vous savez, ces commodes à sept tiroirs supperposés). Il range les objets "images" dans ces tiroirs au fur et à mesure qu'il les rencontre dans la page HTML. Le premier rencontré dans le premier tiroir, le deuxième dans le deuxième tiroir et ainsi de suite jusqu'à ce qu'il n'y ait plus d'objets à ranger.
Seulement, les tiroirs sont numérotés à partir de zéro.
Si bien que la première image sera rangée dans le tiroir images[0]
La deuxième image sera rangée dans le tiroir images[1]
La troisième image sera rangée dans le tiroir images[2], etc.

Comme chaque objet "images[x]" appartient au document actuellement affiché dans la fenêtre du navigateur, on pourra faire référence à une image particulière en la désignant sous le doux nom de :
document.images[0] pour faire référence à la première image chargée par le navigateur
document.images[1] pour faire référence à la deuxième image chargée par le navigateur
document.images[2] pour faire référence à la troisième image chargée par le navigateur, et ainsi de suite.

Comme on le sait déjà, chaque objet, avec JavaScript, possède des propriétés. En particulier, les images possèdent la propriété .src qui désigne la "source" de l'image, c'est-à-dire son nom, voire son adresse physique sur le disque ou sur un serveur. C'est grâce à cette propriété que le navigateur peut retrouver l'image à afficher. C'est la même propriété que celle exprimée dans le tag HTML
<IMG SRC="MonImage.gif"> par exemple.

Ce qui est bien pratique, c'est que cette propriété .src de l'objet image[x] du document est accessible en lecture, mais aussi en écriture. C'est-à-dire qu'on va pouvoir changer la valeur de cette propriété.

Au départ, quand le Navigateur charge les images en mémoire et les range dans les tiroirs du semainier (qui peut avoir autant de tiroirs que l'on veut), la propriété .src de chaque objet images[x] a pour valeur la valeur donnée par le tag <IMG SRC="...."> du code HTML. Si le code HTML dit <IMG SRC="MonImage.gif"> par exemple, et que l'image "MonImage.gif" soit la première image rencontrée dans le code HTML par le navigateur au chargement de la page, la propriété .src de l'objet images[0] (le premier tiroir) aura pour valeur "MonImage.gif", et le navigateur affichera à l'écran l'image portant le nom de "MonImage.gif".
Là ou ça devient passionnant, c'est qu'il suffit de changer la valeur de la propriété .src d'une image quelconque pour que le navigateur affiche l'image à laquelle correspond la nouvelle valeur de la propriété .src qu'on lui aura donné.
C'est ce que fait la fonction afficheimage avec l'instruction :

document.images[0].src = adresseimage;

Il suffit de mettre dans la variable adresseimage le nom ou l'adresse d'une autre image pour que le navigateur affiche cette autre image à la place de la première qui se trouvait dans le tirroir images[0] (le premier tiroir). Et ceci, jusqu'à ce que nous jugions utile de changer de nouveau la propriété .src de cette image pour la remplacer par une autre encore. Et ainsi de suite, autant de fois que nous le voudrons.

Il reste maintenant, à étudier le code HTML qui va gérer les images à l'affichage et surtout l'appel de la fonction sur les événements onMouseOver() et onMouseOut().

Le code HTML se présente comme suit :

<A Href="jsbtanim.htm" onMouseOver="afficheimage('jsimg/som2.gif')" onMouseOut="afficheimage('jsimg/som1.gif')"> (4)
<img src="jsimg/som1.gif" border=0></a> (5)

// (4)
L'objet image n'étant pas capable de réagir à un événement de type onMouseOver() ou onMouseOut(), on tourne la difficulté en faisant de l'image un lien qui lui, réagit à ces événements..
Ca tombe bien, puisque ces images sont des boutons et qu'en cliquant dessus, ils sont faits pour nous brancher sur une autre page HTML. En l'occurence, ce bouton fait revenir à cette page. C'est ce programme que vous trouverez en cliquant pour voir l'exemple à la fin de ce chapitre.
Remarquez la syntaxe de l'appel de la fonction afficheimage à laquelle on passe la chaîne de caractère 'jsimg/som2.gif'.
L'instruction JavaScript s'écrit : onMouseOver="afficheimage('jsimg/som2.gif')"
C'est un exemple d'écriture de code JavaScript dans un tag HTML.
D'abord, on positionne le gestionnaire d'événement : onMouseOver=
Qui signifie pour le navigateur : "quand la souris passera sur le lien (l'image en fait)"
Lorsque le navigateur rencontre cette instruction, il se dit : "Tiens ! Si jamais l'utilisateur passe la souris là dessus, je vais devoir faire quelquechose !".
Oui, mais quoi ? Le navigateur regarde alors ce qu'il y a derrière le signe "=" et exécute l'instruction.
La syntaxe veut que cette instruction JavaScript (l'appel de la fonction afficheimage) soit mise entre guillemets. En fait, c'est une chaîne de caractères. Oui, mais en appelant cette fonction, nous avons besoin de lui passer un paramètre (le nom et l'emplacement physique sur le serveur de l'endroit où on peut trouver l'image de remplacement), qui lui aussi est une chaîne de caractères. Qui devrait aussi être mise entre guillemets. Ce qui nous pose problème, puisque si le navigateur rencontrait encore des guillemets ordinaires, il penserait que l'instruction JavaScript est finie.
Pour se tirer de cet embarras, il faut placer le nom et l'emplacement de l'image de remplacement entre apostrophe simple.
Ce qui donne 'jsimg/som2.gif' . L'instruction complète devient :
onMouseOver="afficheimage('jsimg/som2.gif')" et le tour est joué.
Traduit en langage compréhensible par tous, ceci veut dire (pour le navigateur) :
"Lorsque l'utilisateur passera la souris sur l'image devenue un lien, appelle la fonction afficheimage en lui passant le nom de l'image de remplacement  'jsimg/som2.gif'  "
Alors, disciplinée comme doit l'être une fonction JavaScript (ce petit employé besogneux obéissant), va accomplir sa tâche et afficher la nouvelle image à la place de l'ancienne, comme il est programmé pour le faire.
Nous avons déjà vu celà dans l'explication du fonctionnement de la fonction, plus haut en (3).

De la même manière, l'événement onMouseOut dans le même tag HTML, remettra l'image d'origine en place.
En écrivant : onMouseOut="afficheimage('jsimg/som1.gif')" on dit au navigateur :
"Lorsque la souris quittera la zone de l'image, appelle la fonction afficheimage en lui passant comme argument le nom et l'emplacement de l'image à afficher dans ce cas là, qui est  'jsimg/som1.gif' l'image d'origine."
Et le tour est joué.
En passant puis en enlevant la souris de l'image (sans cliquer dessus), le navigateur affichera telle ou telle image à notre convenance.
Cliquez plus bas sur l'exemple pour voir ce que ça donne.
 

// (5)

Ici, le tag HTML affiche l'image que l'on souhaite voir à l'écran lors du chargement de la page.
C'est à ce moment là que la propriété .src de l'image prend la valeur jsimg/som1.gif qui est le nom et l'emplacement physique de l'image sur le serveur.
 

Conclusion

Avec cette méthode, on réalise d'une manière simple, et efficace un effet d'animation en réponse à un événement.
L'inconvénient, est que la fonction est programmée pour l' images[0] et elle seule. Si on veut faire la même chose pour un autre bouton image, il faudra réécrire une autre fonction qui fera la même chose, mais pour l' images[x].
Et ainsi de suite pour tous les boutons images que nous voudrons mettre dans notre page HTML.
D'où la deuxième méthode décrite ci-dessous, où l'on va passer en pararmètre à la fonction, nom seulement le nom et l'emplacement de l'image à afficher, mais aussi son numéro dans la liste des images stockées dans les tiroirs de notre semainier.

Cliquez ici pour voir un exemple
   

Deuxième méthode
 
La deuxième méthode s'apparente à la première, mais sera plus générale. En effet, nous avons vu dans la première m
éthode, qu'elle n'était valable que et seulement pour une image bien déterminée. Si l'on change la place de l'image dans la page, il faut réécrire la fonction.
Dans la deuxième méthode, nous allons passer le numéro de la place de l'image à la fonction, de sorte qu'elle puisse agir quelle que soit l'image et sa place dans la page HTML.
La fonction devient alors :

function afficheimage (adresseimage, placeimage) {  // (1)

document.images[placeimage].src = adresseimage;  // (2)
}

(1) Ici, nous passons un deuxième paramètre placeimage à la fonction afficheimage. Ce paramètre recevra le numéro de la place de l'image à animer dans la page HTML. C'est dans le code HTML correspondant que nous passerons la valeur de la place de l'image en question.

(2) Et au lieu de demander à la fonction afficheimage, d'agir sur la propriété .src de l'image images[0] par l'instruction document.images[0].src = adresseimage, ce qui restreignait son action à la seule image images[0], nous lui demandons d'agir sur document.images[placeimage].src. Ce qui, en lui passant la valeur correcte dans placeimage, lui permet d'agir sur toutes les images de la page HTML, quelque soit leur place dans le document HTML.

Le code HTML devient :

<A Href="jsbtanim.htm" onMouseOver="afficheimage('jsimg/som2.gif', 1)" onMouseOut="afficheimage('jsimg/som1.gif', 1)"> (3)
<img src="jsimg/som1.gif" border=0></a>

(3) Dans le code HTML, dans : onMouseOut="afficheimage('jsimg/som1.gif', 1)" remarquez le 1 après la virgule à la fin de l'appel de la fonction. C'est le deuxième paramètre dont la fonction a besoin. C'est la place de l'image dans la page HTML.
Si l'image à animer est la première de la page HTML, ce 1 deviendra 0. Si l'image est la deuxième (c'est notre cas), sa place est le numéro 1, etc. comme vu dans la première méthode. Nous ferons de même dans l'appel de la fonction par onMouseOver="afficheimage('jsimg/som2.gif', 1)".

De cette manière, nous pourrons utiliser la fonction afficheimage pour toutes les images à animer de notre page. Nous avons créé là un deuxième petit employé modèle, mais plus généraliste que son collègue qui lui, n'était capable d'agir que sur une image et une seule.

Remarquez que les paramètres sont passée à la fonction dans l'ordre dans lequel elle en a besoin, et séparés par des virgules simples. Les noms donnés aux pararmètres dans la définition de la fonction n'ont aucune importance, mais l'ordre de passage est primordial.

Cliquez ici pour voir un exemple