Modification d'opacité au passage de la souris

Publié le par PêUR

Mise à jour le 20/01/2006 11:28

Voici une méthode en CSS, pour modifier l'opacité d'une image cliquable au passage de la souris.

 

Hop!

Comment faire ?

  • 1 / Modifiez votre CSS :

Tout d'abord il faut ajouter ces 2 classes à votre CSS:

CSS

a.opacity img {filter:alpha(opacity=50);
               -moz-opacity: 0.5;
               opacity: 0.5;}

a.opacity:hover img {filter:alpha(opacity=100);  
                     -moz-opacity: 1.0;  
                     opacity: 1.0;}

La première ligne a.opacity img applique une opacité de 50% sur toutes les images cliquables (avec lien) pour lesquelles vous avez spécifié la classe opacity (voir § 2)

La deuxième ligne a.opacity:hover img applique pour ces mêmes images une opacité de 100%.

  • 2 / Pour chaque image cliquable que vous voulez rendre "opacifiable"

Il faut maintenant juste rajouter dans le code source (mode HTML) l'appel à la classe opacity dans la balise de lien:

HTML

<a class=opacity href="http://AdresseDuLien" >
<IMG src=" http://idata.over-blog.com/0/08/58/81/articles/opacity.gif">
</a>

 

Si vous n'êtes pas familiarisé avec le code HTML pour rajouter l'appel à cette classe via le mode source, vous pouvez le faire par l'éditeur de la manière suivante: cliquez droit sur l'image, sélectionnez "Modifier Liens", sélectionnez l'onglet "Avancé" et dans le champs "Classes de Feuilles de style" saisissez opacity.

 

Hop!

Pour aller plus loin

La propriété "opacité" existe seulement pour les navigateurs supportant CSS3. Pour les autres navigateurs, en CSS1 et CSS2 cette propriété n'est pas interprétée. Pour contourner ce problème on utilise les propriétés propriétaires de chaque navigateur:

  • filter:alpha(opacity=nn); pour Internet Explorer
  • -moz-opacity: nn; pour Mozilla et Firefox
  • opacity:nn;Pour les navigateurs supportant CSS3

 

Pour appréhender l'effet visuel des valeurs d'opacité, passez votre souris sur chacune des images ci-dessous. Une infobulle apparaît avec la valeur associée à l'opacité appliqué à l'image:

Opacité: 5 Opacité: 25Opacité: 50Opacité: 75Opacité: 100

A vous d'adapter les prporiétés opacity, filter: alpha(opacity= et -moz-opacity de la classe Opacity ajoutée dans votre CSS à la première étape de cette article

 

Article connexe

MandarinDesign - Mise en page CSS avancée 

 

Publié dans CSS

Commenter cet article

Amandine 18/06/2006 13:11

Coucou,
Il y aurait-il une possibilité de faire le contraire ?
Que l'image soit normale, et qu'au passe de la souris elle devienne opaque.
J'ai testé d'inverser les valeurs dans les 2 classes, mais ca ne fonctionne pas.

Pour le moment j'ai effacé les classes dans le CSS, j'attends ta réponse pour recommencer.

A bientot.

PêUR 01/07/2006 23:01

Si si, en inversant les valeurs cela fonctionne. N'oubli pas de les changer à toute les propriétés de chaque classe.

Richard 25/05/2006 18:32

Merci PêUR. En fait j'avais utilisé la classe de feuilles de style dans l'onglet "Avancé" des propriétés d'image, et ça le met effectivement automatiquement dans la balise .
Encore merci pour ton aide

PêUR 25/05/2006 22:55

Tu peux faire pareil mais avec les "Propriétés de Liens" ;-)

Richard 25/05/2006 15:07

Salut, merci déjà à toi pour ton site qui m'a bien aidé à configurer mon blog.
Par contre, je n'arrive pas à comprendre pourquoi l'usage de la classe Opacity ne fonctionne pas sur les images de mon en-tête.
Encore merci

PêUR 25/05/2006 17:05

Bonjour Richard, regarde bien dans quelle balise tu as mis l'attribut class="opacity"!!!!
Tu l'as mis dans la balise , il le faut dans la balise ;-)
En passant, très joli blog!!!!!!!!!!!!!!! (Allez jeter un coup d'oeil)

Gloups 25/05/2006 12:03

Merci pour cet article très utile et bien expliqué

J'en ai profité pour regarder les autres ressources, et elles sont super !!! Bravo et bonne continuation !

PS : J'ai mis sur mon blog l'opacité des images, et ça fonctionne impec'

PêUR 25/05/2006 16:42

Merci Gloups!
:)

françois 10/04/2006 17:55

Bonjour,
j'ai inséré une infobulle sur certains mots mais mon infobulle reste désespérément transparente, quelles que soient les couleurs de background) ce qui fait que le texte de l'infobulle et du site se mélangent, donc tout est illisible; ce n'est pas possible de rendre cette infobulle opaque ??
Merci.

PêUR 11/04/2006 00:04

Tu peux dire précisement où tu as mis une telle infobulle?