Effet de rollover avec transparence PNG et CSS

Cette technique nécessite le support de la tranparence PNG 8 bits et de la pseudo-classe :hover sur l’élément img. Elle ne fonctionne donc avec aucune version actuelle d’Internet Explorer, puisqu’il ne supporte ni l’une ni l’autre (IE 7 beta 1 supporte la transparence PNG 8 bits, mais pas la pseudo-classe :hover sur l’élément img).

Cette technique est similaire à (et inspirée par) celle utilisée sur ALA, version 2005‑2006

Code HTML

<p><img src="/test/images/logo-240-trans.png" width="240" height="240" alt="" class="png-rollover"></p>

Code CSS

<style type="text/css">
img.png-rollover {
	background-color:#a8c70b;
}
img.png-rollover:hover {
	background-color:#3d98da;
}
</style>