Exemple
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
a img {border:2px solid white} /* défini l'encadrement des images
dans les liens hors survol */
a:hover {border:0px } /* hack pour IE - ne sert sinon à rien
*/
a:hover img {border:2px #336699 dotted} /* défini l'encadrement
des images lors du survol */
</style>
</head>
<body>
<a href="#"><img src="image.jpg" width="200"
height="144" alt=""></a>
</body>
</html>
COMMENTAIRES
On utilise souvent sur le web des images cliquables. On note cependant peu d'effet de survol sur ces images, au contraire des liens classiques. C'est sans doute dû à un bug d'Internet Explorer, qui au naturel refuse de faire un hover sur le lien <a> encadrant l'image.
Il faut passer par le petit hack ci-contre pour que cela marche. Une fois que l'on connaît le truc, c'est très simple. Mais il m'a fallut un bout de temps pour arriver à trouver comment faire.
Marche dans les navigateurs Gecko, dans Opéra (lesquels n'ont pas besoin du hack) et dans Internet Explorer 5.0 et supérieurs.
A noter que Internet Explorer ne comprend "dotted" qu'à compter de sa version 5.5. Cet attribut CSS est donc interprété comme "solid" dans IE 5.0.
Mieux vaut définir une bordure hors survol de la même largeur que la bordure au survol, sinon vous aurez une page HTML qui risque de sautiller (la hauteur de son contenu bougera lors du survol). Mieux vaut donc se contenter de faire varier la couleur ou l'apparence de la bordure, et ne pas toucher à l'épaisseur.