Tutoriel Javascript : le rollover
Le terme “rollover” veut dire “rouler
dessus”. Il s’agit de modifier une image
d’une page web quand le pointeur de la souris
passe dessus et de rétablir l’image
initiale quand le pointeur de la souris la quitte.
Cette pratique a surtout un but esthétique
et convivial. On utilise le rollover dans les menus
(mise en surbrillance du menu pointé par
la souris, par exemple), dans les boutons sous forme
d’image, etc.
Voici donc un code Javascript qui vous permet de
créer des rollovers (ce code est gracieusement
offert par le site www.jejavascript.net), je me
permets seulement de le commenter.
<script language="JavaScript">
<!--
//PLF-http://www.jejavascript.net/
function objet() {
this.length = objet.arguments.length
for (var i = 0; i < this.length; i++) this[i+1]
= objet.arguments[i]
}
var nom = new objet ("imaga.gif", "imagb.gif");
var numero = 1;
function changer() {
numero += 1;
if (numero == nom.length + 1) numero = 1;
document.image.src = "im/"+nom[numero];
}
function initial() {
if (numero != 1) numero = 1;
document.image.src = "im/"+nom[numero];
}
function prechargimg() {
var doc=document;
if(doc.images){ if(!doc.precharg) doc.precharg=new
Array();
var i,j=doc.precharg.length,x=prechargimg.arguments;
for(i=0; i<x.length; i++)
if (x[i].indexOf("#")!=0){doc.precharg[j]=new Image;
doc.precharg[j++].src=x[i];}}
}
//-->
</script>
La balise HTML <BODY> doit contenir un appel
à la fonction de « pré-chargement
» des images utilisés (la fonction
définie « prechargimg » effectue
le pré-chargement de l’image passée
en paramètre) :
onLoad="prechargimg('im/imagb.gif')"
Voici le code de l’image qui va changer d’aspect
à chaque passage de la souris :
<a href="#" onMouseOut="initial()" onMouseOver="changer()"><img
src="im/imaga.gif" width="200"
height="194" border="0" name="image"></a>
L’évènement “onMouseOut”
est l’évènement qui survient
quand la souris est en dehors de l’image,
dans ce cas, la fonction initial() est appelée
(cette fonction affiche l’image initiale).
L’évènement « onMouseOver
» survient lorsque la souris passe sur l’image,
dans ce cas, la fonction changer() est appelée
(cette fonction change l’image initiale).
Dans notre exemple, l’image initiale est
« im/imaga.gif » et l’image de
« substitution » est « im/imageb.gif
» (« im » est le nom du dossier
qui contient les images).
