Des images réactives

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".

Un exemple plus complexe

Il s'agit d'une page d'accueil construite en utilisant le principe des images changeantes.
L'abricot mystique

Page d'accueil | Autres fiches