Le rollover ou image réactive

Comprendre et savoir les créer

Le problème

Sur le web, le rollover (ou image réactive) permet de changer une image, lorsque le curseur de la souris passe sur celle-ci. Pour parvenir ce petit miracle de technologie, il suffit d'écrire (ou d'utiliser) un script en JavaScript. Maintenant, il est vrai que la plupart des éditeurs HTML permettent de le faire, sans même mettre la main dans le code. Est-ce que cela fait bien la même chose ? Est-ce que cela est vraiment nécessaire ? Le but de cette fiche est de montrer comment faire un beau rollover, sans passer par des éditeurs.

Exemples de rollover

Faire un rollover

Le résultat

Dans le header

<script language="JavaScript">
<!-- Begin
bouton = new Image();
bouton.src = "images/bouton-vert_on.gif";
end -->
</script>

Dans le body, à l'endroit où s'affiche le rollover

<a href="#" onmouseover="bouton.src = 'images/bouton-vert_on.gif';" onmouseout="bouton.src = 'images/bouton-bleu_off.gif';"><img src="images/bouton-bleu_off.gif" border=0 width="187" height="29" name=bouton></a>

Voici pour comparer, le même code pour un rollover généré par un éditeur (Dreamweaver 4)

Le matériel

- 2 images (exp deux boutons de couleur différente)
- ces images doivent (c'est mieux) posséder des noms explicites : ici bouton-bleu_off.gif et bouton-vert_on.gif

Le code

Pour les personnes qui n'auraient pas besoin d'autres explications, voici le code pour générer une page HTML avec un rollover. Il suffit donc de copier le code ci-dessous est de remplacer les éléments en gras.

<HTML>
 <HEAD>
       <SCRIPT LANGUAGE="Javascript">
       <!--
        monrollover= new Image( );
        monrollover.src="image-subsitution.gif";
       //-->
       </SCRIPT>
  </HEAD>
  <BODY>
   <A HREF="votre-lien.html" onmouseover="monrollover.src='image-subsitution.gif';" onmouseout="monrollover.src='image-defaut.gif';">
    <IMG SRC="image-defaut.gif" name="monrollover" border=0>
   </A>
  </BODY>
</HTML>

Les explications

Décortiquons le code (fait à la main) pour comprendre ce qui se passe.

<script language="JavaScript">
...
</script>		 Balises à placer dans le header (par convention, juste avant la balise </head>) qui indiquent aux navigateurs que tout ce qui est compris entre les deux balises est du JavaScript.
<!-- Begin
...
end -->		 Indique aux navigateurs qui ne gèrent pas le JavaScirpt de sauter cette partie
bouton = new Image();
bouton.src = "images/bouton-vert_on.gif";		 Fonction javascript qui permet de précharger l'image de substitution.

<a href="#" onMouseOver="bouton.src = 'images/bouton-vert_on.gif';" onMouseOut="bouton.src = 'images/bouton-bleu_off.gif';">
...
</a>

Balises HTML contenant le lien vers vers une page HTML (href) et les deux fonctions JavaScript onMouseOver et onMouseOut qui permettent de changer d'image au passage de la souris.
href="#" Lien vers une page HTML. Ici, le # renvoie à la même page.
onMouseOver="document.bouton.src = 'images/bouton-vert_on.gif';" Fonction JavaScript qui dit ceci : "Lorsque la souris me (l'image) passe dessus [onMouseOver], à l'endroit qui s'appelle bouton [bouton.src], j'affiche l'image qui se trouve dans le dossier images/ et qui s'appelle bouton-vert_on.gif [images/bouton-vert_on.gif]"
onMouseOut="document.bouton.src = 'images/bouton-bleu_off.gif';" Fonction JavaScript qui dit ceci : "Lorsque la souris sort de ma zone (l'image) [onMouseOut], à l'endroit qui s'appelle bouton [document.bouton.src], j'affiche l'image qui se trouve dans le dossier images/ et qui s'appelle bouton-bleu_off.gif [images/bouton-bleu_off.gif]"
<img src="images/bouton-bleu_off.gif" border=0 width="187" height="29" name=bouton>  Balises HTML qui permet d'afficher une image par défaut qui s'appelle bouton-bleu_off.gif et qui se trouve dans le dossier images/. En outre cet endroit sur la page, s'appelle bouton [name="bouton"]

Les paramètres à changer

Finalement, dans un rollover, il y a 5 informations à paramétrer :

1. le nom de l'image : Il se trouve à 4 endroits : dans la fonction de préchargement, dans les fonctions onMouseOver et onMouseOut et dans la balise <img>. Il doit être partout le même. Dans notre exemple l'image s'appelle 'bouton'.

bouton = new Image();
bouton.src = "images/bouton-vert_on.gif";

<a onMouseOver="bouton.src = 'images/bouton-vert_on.gif';" onMouseOut="bouton.src = 'images/bouton-bleu_off.gif';">
<img src="images/bouton-bleu_off.gif" border=0 width="187" height="29" name="bouton">
</a>

2. le nom des fichiers-image :

3. Le lien vers un fichier HTML : il se trouve dans la balise <a>. Il suffit de mettre le nom du fichier ainsi que le chemin pour y parvenir.

href="nom-de-dossier/nom-de-dossier/nom-du-fichier.html"

Au delà du simple bouton réactif

En fait, l'image peut donc avoir trois états différents : l'image par défaut, onMouseOver et onMouseOut. Ici, l'image par défaut et l'image onMouseOut est la même pour justement retrouver l'état par défaut lorsque la souris sort de la zone de l'image. Mais ça peut ne pas être le cas :

Limites

On ne peut qu'afficher des images de même taille, sinon ça les déforme. Voir l'exemple ci-dessous :

Rollover avec ces deux images donne comme résultat

La solution est d'uniformiser la taille de l'image (en passant par un éditeur de dessin), comme ci-dessous. Bien entendu, cette solution comporte des limites de mise en page :

Liens

-Rollovers dans le cours de création de pages web C. Oihénart

- Optimiser une image pour le WEB

- Comment insérer un diaporama dans une page web ?

- Les animations dans les pages WEB

counter - eDi