Utiliser l'opacité pour simplifier les rollovers CSS

Accueil

RECHERCHER

CHAINES

RESSOURCES

RUBRIQUES JDN

VOTRE HIGH TECH

SCIENCE

ANNUAIRES

CONTACTS

PRATIQUE CLIENTS WEB

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 {
  opacity: 0.5;
  filter:alpha(opacity=50);
  }

a.rollopaque:hover img {
  opacity: 1.0;
  filter:alpha(opacity=100);
  }
</style>


Xavier Borderie, JDN Développeurs





Accueil \| Haut de page