RECHERCHE

Plan du site

Développeur

BOURSE

RUBRIQUES
 
 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
 
 



Votre avis sur cette publicité