Lorsqu'un lien hypertexte est associé à une image, il est possible
de la modifier lors des passages de la souris.
|
Principes utilisés
- L'entrée de la souris sur une zone représentant un lien hypertexte
provoque un évènement onMouseOver. Sa sortie provoque un évènement
onMouseOut. Il suffit d'associer une fonction JavaScript qui
change la source de l'image à ces deux évènements.
- Pour avoir accès à une image d'un document HTML à partir d'une
fonction JavaScript, il suffit d'utiliser la propriété images de
l'objet document en indiquant le nom de l'image à traiter.
- Modifier l'image consiste à changer sa source, donc sa propriété src.
|
Un exemple simple
Deux fichiers (imgon.gif et imgoff.gif) sont associés
à la même image qui joue le rôle de lien hypertexte.
On a utilisé le code suivant :
<A HREF = "#ici"
onMouseOver = "document.images['image0'].src='images/imgon.gif'"
onMouseOut = "document.images['image0'].src='images/imgoff.gif'">
<P align=center>
<IMG NAME="image0" BORDER=0 SRC="images/imgoff.gif">
</P>
</A>
Note : on aurait pu se contenter d'indiquer "image0.src" au lieu
de "document.images['image0'].src".
|