Team-Masters.com
Que du Gratuit pour Webmasters
Changer l’opacité d’une image avec les styles CSS
Voici un truc qui utilise les styles CSS. Il s’agit de changer l’opacité d’une image au survol de celle-ci.
Le code suivant est juste à copier-coller. Il se décompose en deux parties.
La première, constitue le code CSS que vous pouvez intégrer à votre page comme vous voulez :
soit dans l’en-tête (le HEAD) de votre page entre les balises <style type="text/css"> et </style>
soit dans une feuille de style externe par copier-coller tel quel.
Voici le code CSS :
.opacite img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}
.opacite:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}La deuxième partie est du HTML et constitue l’appel à insérer où vous voulez dans le BODY de votre page. Il suffit, pour appliquer l’effet, de préciser à l’intérieur du tag <a ...> la classe comme ceci :
<a href="http://www.team-masters.com" class="opacite"><img src="votreimage.gif" border="0"></a>
<a href="http://www.autreurl.com/" class="opacite"><img src="autre_image.jpg" border="0"></a>C’est cool, simple et rapide.
27 juin 2005
Très Bon Plan A NE PAS MANQUER ! Cliquez!!
Des Secrets pour 7€: Un rapport, un script pour réussir à vendre sur Internet. Cliquez!
22 menus verticaux en CSS prêts à l’emploi
Un menu horizontal bien souligné
Un menu vertical avec un effet bouton en CSS
Un menu horizontal souligné au passage de la souris en CSS
Une barre de pagination tout en CSS
Un menu horizontal en CSS avec une barre de séparation
Un menu vertical hiérarchisé en CSS
Un menu vertical aux effets agréables en CSS
CSS : Un menu vertical en 3D
Créez un menu vertical avec effet de rollover en CSS
