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>



Les meilleures astuces CSS sur le JDN :
- Comment appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment centrer horizontalement une DIV dans une autre en CSS ?
- Comment créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment définir les cellpadding et cellspacing en CSS ?
- Comment modifier l'image d'un bouton input en CSS ?
- Comment rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de cet élément opaque en CSS ?
- Internet Explorer supporte-t-il l'attribut CSS border-radius
 
Xavier Borderie, JDN Développeurs
 
 
Accueil | Haut de page