Le
"rollover", petit gadget utile Le
"rollover", petit gadget utileSimple gadget ou bien outil multimédia incontournable ? A chacun de juger ...
Personnellement, je le considère comme un outil très pratique lorsque l'écran est saturé de liens parfois peu discernables (voyez le petit exposé sur les liens de couleur avec la souris) et agréable car apportant de l'animation.
Son principe est simple et sa conception tout autant : il s'agit d'utiliser le passage de la souris sur un objet, graphique ou image, animé ou non, pour faire apparaître un autre objet, graphique ou image.
Passez le pointeur de votre souris : 
Il déclenche l'effet "rollover" !
Deux formules sont utilisées par les Webmestres : le rollover simple, à 2 images : avant et pendant le passage de la souris et le rollover multiple, si l'on peut dire, à 3 images : avant, pendant, après son passage. Cet exposé va vous familiariser avec le premier car le second, en effet, peut être considéré comme un gadget.
Le script se décompose en deux parties. L'une qui sera la déclaration de fonction, en Javascript :
<HEAD> <TITLE>Utilisation du
rollover</TITLE> <SCRIPT language="JavaScript"><!-- nouveau=new
Image(); cliquez=new
Image(); nouveau.src="../valimage/nouveau.gif" cliquez.src="../valimage/cliquez.gif" function
imagebase(nomimage,imageA)
{ document[nomimage].src=imageA; } function
imagelien(nomimage,imageB)
{ document[nomimage].src=imageB; } //--></script> </HEAD>
dont la traduction est la suivante :
en rouge, "nouveau" et "cliquez" sont en quelque sorte les noms
génériques attribués aux fichiers image
en brun, les adresses des images définies avec les noms
génériques
en fuchsia, les noms génériques attribués aux
fonctions qui vont appeller la 1ère puis la 2ème
image
en vert enfin, l'ordre dans lequel ces images seront
appelées
Attention : il est impératif d'éviter tout accent, espace ou caractère dit exotique dans ces noms !
Deuxième graphique mis en oeuvre :
Deuxième partie du script, qui sera la commande d'exécution dans la page Html :
<A
HREF="fichier.htm"
onmouseover="imagebase('roll','../valimage/nouveau.gif')"
onmouseout="imagelien('roll','../valimage/cliquez.gif')"> <IMG
SRC="../valimage/cliquez.gif"
WIDTH=90
HEIGHT=30
BORDER=0
ALIGN=bottom
name=roll></A>
dont les variables sont les suivantes :
En bleu : le fichier de destination au clic de la souris
En fuchsia : le nom de fonction des images
paramètrées
En rouge : le nom de séquence dans la commande. Chacune a un
nom différent (roll1, roll2, roll3, etc.)
En brun : l'adresse des images. Ce script les charge automatiquement
pour rendre l'affichage plus rapide
En vert : les variables de dimension et d'encadrement
Vous aurez remarqué qu'il n'y a qu'un jeu de celles-ci : les 2
objets doivent avoir la même dimension !
Troisième "roll" mis en oeuvre, cette fois deux photos au format "jpg" :
Impressionnant, non ?
Attention : il est évident que l'utilisation de photos est délicate : il faut les compresser au maximum !
Le
script Html sera inséré, à
l'emplacement de l'affichage, pour
chaque rollover mis en oeuvre
avec, pour chaque animation, un nom de séquence
différent !
Dans le cas contraire, et cela est vrai pour tous les objets multimédia (son, image, vidéo, etc), le poids de la page sera trop lourd et nombre de visiteurs risquent alors de ne pas attendre le chargement de tous ces objets, voire de l'abandonner purement et simplement ...
En résumé, voilà un système de lien hypertexte élaboré, agréable à l'oeil et même accrocheur, que l'on pourra utiliser régulièrement à condition de le mettre en oeuvre avec des graphiques, images ou photos très légers.
A vous de jouer maintenant !
