Le "rollover", petit gadget
utile Le "rollover", petit gadget
utileVoici un autre sujet de conversation et d'échanges de vue sur les forums de conception de sites.
Simple 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 type="text/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
Les noms que vous attribuerez à ces variables seront les vôtres : à vous donc de choisir des noms qui vous permettront de "jongler" sans risque de confusion.
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 !
