Exemple
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
a img {border:none} /* pas d'encadrement des images */
a:hover {border:0px } /* hack pour IE - ne sert sinon à rien
*/
a:hover img {width:300px ; height:216px} /* agrandi les images lors
du survol */
</style>
</head>
<body>
<a href="#"><img src="image.jpg" width="200"
height="144" alt=""></a>
</body>
</html>
COMMENTAIRES
Cet effet simple permet de zommer une image. Les liens <a href="#"> ne servent normalement à rien (sauf si on veut rendre cliquable l'image zoomée). Simplement, Internet Explorer 5.x et 6.0 ne savent pas interpréter les pseudo-class :hover en-dehors d'un lien <a>.
Dans l'exemple ci-contre, c'est le lien hors survol qui a été défini sans taille CSS. L'image s'affiche alors dans la taille définie dans le code HTML.
On change ensuite la taille en redéfinissant celle-ci dans le a:hover (les tailles CSS l'emportent sur les tailles HTML).
On pourrait faire l'inverse : rétrécir l'image dans le lien hors survol, et la laisser revenir à la normal dans le a:hover.
Pour que le zoom ne pixélise pas, il faut une image de bonne qualité (ce qui n'est pas le cas ici), éventuellement réduite dans le lien hors survol.
Si on ne veut pas décaler toute la page vers le bas lors du zoom, on peut définir un container autour de l'image dont la taille aura été prévue pour afficher l'image zoomée à son maximum. Rien ne bougera dans la mise en page. Inconvénient, il y aura un grand blanc hors zoom.
Marche dans les navigateurs Gecko, dans Opéra (lesquels n'ont pas besoin du hack) et dans Internet Explorer 6. Ne marche pas dans IE 5.0 et IE 5.5.
D'autres techniques de zoom sur le site Openweb.