Un rollover sur une image
Pour obtenir une image survolée, comme celle-ci :
... voici le code à utiliser :
<a onmouseover="document.poops.src='img/poops2.gif'" onmouseout="document.poops.src='img/poops1.gif'" href="#">
<img src="img/poops1.gif" name="poops" alt="Texte alternatif" title="Infobulle" />
</a>
- Les deux images utilisées doivent avoir les mêmes dimensions, la même extension et le même radical (ici, poops). Vous numéroterez obligatoirement 1 l'image qui s'affiche par défaut (ici, poops1.gif) et 2 l'image qui s'affiche au passage de la souris (ici, poops2.gif).
- Dans le code ci-dessus, vous remplacerez le mot en vert (poops) par un autre mot, qui sera unique et propre à chaque rollover. Il ne peut y avoir deux rollovers identifiés par le même nom sur tout votre site. Ainsi, si vous faites 3 rollovers sur des images de fleurs, il faudra remplacer poops par tulipe, rose et bleuet, par exemple.
Le rollover maker
Comme je trouvais le code un peu fastidieux, j'ai fabriqué un générateur de rollovers, qui produit automatiquement le code indiqué plus haut. Il est à la disposition de tous, et particulièrement des GuppYstes, qui devront bien penser à charger les images du rollover dans le répertoire img/ de leur GuppY.
Saute-Mouton - http://realia.free.fr/sautemouton_avril/newsprt.php?lng=fr&pg=1789 - [Version PDF]
