Rollover

Un rollover, c'est le remplacement d'une image par une autre, au survol de la souris.
On a besoin pour ça de deux images, et d'un code à placer en mode HTML.
On donne à un rollover un nom unique, modifiable à loisir

<a onmouseover="document.roll1.src='http://adresse de l'image de remplacement'"
onmouseout="document.roll1.src='http://adresse de l'image par défaut'">
<img name="roll1" src="http://adresse de l'image par défaut">
</a>

On peut aussi créer un rollover sans utiliser de javascript inline, mais il faut que l'image de base soit composée des deux images, et c'est juste un jeu de cachecache d'un lien au survol qui fait passer de l'une à l'autre.

en html, c'est donc un lien, ici vers nulle part, qui possède un identifiant

<a id="rollcss" href="#"><span>&nbsp;</span></a>

en css, ce lien est limité en taille, avec l'image qui vient se placer en haut à gauche, et au survol se décale

#rollcss {display:block; margin:0 auto;width:100px; height:100px; background:url(http://idata.over-blog.com/0/13/75/16/rollcss.jpg) 0 0 no-repeat;}
#rollcss:hover, #rollcss:active, #rollcss:focus {background-position: 0 -100px;}
#rollcss span {text-indent:-5000px;}
a#rollcss {text-decoration:none;}