Quand l'image change

Normalement, une image est affichée et figée sur une page html lors du chargement de celle-ci. Cependant, un changement d'image peut avoir lieu :

• à chaque nouveau chargement de la page
• après le chargement de la page, suite à une action du visiteur

Une image différente à chaque chargement

La fonction javascript document.write() permet d'écrire directement dans une page html. Elle est déjà à la base de la galerie dynamique. Elle va être utilisée ici pour afficher une image différente à chaque nouveau chargement de la page. C'est ce qui est utilisée dans TheM pour de nombreuses imagettes décoratives, que ce soit sur la page d'accueil ou sur les pages de présentation des galeries. A chaque visite sur la page, l'image présentée est choisie de manière aléatoire dans une liste.

C'est également le cas ici :


Cette image, qui peut changer si cette page est rechargée, est choisie parmi trois images possibles grâce à la commande suivante :

<script>
    image = new Array(3);
    image[0] =  "images/static1.jpg";
    image[1] =  "images/static2.jpg";
    image[2] =  "images/static3.jpg";
    document.write("<img src='" + image[Math.floor(3*Math.random())] + "'>");
</script>
	

où :

image	tableau contenant la liste des images à afficher
Math.random()	fonction javascript générant un nombre aléatoire compris dans l'intervalle [0.0 , 1.0[. Il sera ensuite multiplié par le nombre d'images disponibles, ici 3
Math.floor()	fonction javascript renvoyant la valeur entière d'un nombre
Math.floor(3*Math.random())	renvoit un nombre aléatoire compris dans la liste {0 , 1 , 2}

Ce script va donc écrire, dans la page html, la commande d'affichage d'une image choisie aléatoirement dans la liste image, c'est à dire l'une des trois commandes suivantes :

<img src='images/static1.jpg'>

<img src='images/static2.jpg'>

<img src='images/static3.jpg'>

Cette méthode a l'avantage d'être simple, mais son effet est limité puisque le changement n'a lieu qu'au chargement - ou au rechargement - de la page.

Encore plus de dynamisme

Si le javascript permet d'écrire dans une page html via la fonction document.write(), ce langage permet aussi de modifier directement certaines propriétés des objets présents sur la page. Il est ainsi possible de changer la source d'une image.

Prenons l'exemple d'une image déclarée ainsi :

<img src="images/dynamic1.jpg" name="dynamic" width=150 height=100>

L'objet-image "dynamic" a ici pour source "images/dynamic1.jpg". Mais cette valeur peut être modifiée en cliquant simplement sur l'un des liens ci-dessous :

image 1

image 2

En fait, en cliquant sur le lien image 2, une fonction javascript est appelée :

<a href="#" onclick="image2();">image 2</a>
	

Cette fonction, définie précédement dans le code source de la page, pilote le changement d'image en indiquant la nouvelle valeur de l'attribut src pour l'objet-image nommé "dynamic" présent dans le document html actuel :

<script>
    function image2() {document.images["dynamic"].src="images/dynamic2.jpg"}
</script>
	

Mais, le lien de commande peut très bien être l'image elle-même:


Ici ce n'est pas lorsque le visiteur clique (événement onclick) que la source change mais lorsque le pointeur passe sur l'image (événement onmouseOver) ou lorsqu'il la quitte (événement onmouseOut) :

<script>
    function bouton1() {document.images["bouton"].src="images/dynamic1.jpg"}
    function bouton2() {document.images["bouton"].src="images/dynamic2.jpg"}
</script>

<a href="#" onmouseOver="bouton2();" onmouseOut="bouton1();">
    <img src="images/dynamic1.jpg" name="bouton"  width="150" height="100">
</a>
	

Cette technique est particulièrement utilisée pour simuler des boutons. Dans ce cas l'image aura l'apparence d'un bouton en position haute et celle du bouton appuyé lorsque la souris passe dessus. Si sur une même page, plusieurs images doivent être ainsi pilotées, il suffit de leur donner des noms différents et d'écrire autant de fonctions que nécessaire comme c'est le cas ici pour les objets-images dynamic et bouton.

Et pourquoi pas une galerie?

Une galerie complète pourrait être créée sur la base de cette technique. Le passage d'une photo à l'autre ne correspondrait plus au chargement d'une nouvelle page html mais au changement de la source d'une image. Le nombre de fichier html serait considérablement réduit par rapport à une galerie classique et la maintenance n'en serait que plus facile. Par contre, il est alors difficile d'afficher des commentaires propres à chacune des photos. De même, avoir un lien vers une image précise devient irréalisable alors qu'il est aisé d'indiquer la page hébergeant cette même image dans un site classique.

Cette technique, avec quelques restrictions, peut donc être employée comme mécanisme moteur d'une galerie photo simplifiée.