|
Utiliser l'opacité pour simplifier les rollovers CSS
"Est-il possible de créer des rollovers en CSS à partir d'une seule image ?"
|
06/06/2005
 |
Forum |
|
|
Réagissez
dans les forums
de JDN Développeurs
|
Les rollovers sont possibles en CSS, en appliquant divers effets
via la feuille de style : visibilité, GIF transparent... Cependant,
la plupart des techniques requièrent deux versions de la même
image, afin de différencier l'image normale de celle survolée.
Il est cependant possible de ne se servir que d'une
seule image.
Ces rollovers
s'effectuent via l'opacité de l'image : l'image normale est affichée
avec une opacité de 75%, l'autre le à 100% (ou l'inverse,
au besoin). On utilise pour cela la propriété opacity,
disponible dans CSS, et donc reconnue par la plupart des navigateurs
modernes (quoique Internet Explorer nécessite l'utilisation d'un filtre).
<a href="page.html" class="rollopaque"><img
src="img.jpg" /></a>
<style type="text/css">
a.rollopaque img
a.rollopaque:hover img
</style> Xavier Borderie, JDN Développeurs
|
| Copyright
2006 Benchmark Group - 69-71 avenue Pierre Grenier, 92517 Boulogne Billancourt Cedex, FRANCE |
|
