Team-Masters.com
Que du Gratuit pour Webmasters
Changer l’opacité d’une image au passage de la souris
Voici un effet que vous avez certainement déjà vu sur certains sites. Avouons qu’il est beau.
C’est un effet qui utilise les propriétés d’opacité sur des images. Votre image de départ apparaît sur votre page mais elle est rendue volontairement plus "opaque". Et quand vous la survolez avec la souris, elle apparaît sous ses couleurs normales. Cet effet, qui fonctionne pratiquement avec tous les navigateurs (FireFox : Toutes versions ; Mozilla : 1 et + ; Netscape Navigator : 6 et + ; Internet Explorer : 4 et +) utilise un code Javascript.
Assez de bavardages, visionnez l’effet qui change l’opacité d’une image au passage de la souris.
Pour obtenir ce résultat, on agit en deux étapes.
Il faut d’abord insérer le code javascript ci-dessous dans le HEAD de votre page :
<script language="JavaScript">
/*
INSEREZ CE CODE UNE SEULE FOIS DANS LE HEAD DEVOTRE PAGE
*/
function makevisible(cur,which)
{
if(document.getElementById)
{
if (which==0)
{
if(document.all)
cur.filters.alpha.opacity=100
else
cur.style.setProperty("-moz-opacity", 1, "");
}
else
{
if(document.all)
cur.filters.alpha.opacity=40
else
cur.style.setProperty("-moz-opacity", .4, "");
}
}
}
</script>Dans le corps de votre page (BODY), on va afficher l’image qui va servir de lien vers une autre page de votre site et sur laquelle on va appliquer l’opacité. On utilise alors les événements onMouseOver et onMouseOut, qui vont permettre au passage de la souris sur l’image, de lui redonner son vrai visage, et lorsque la souris repart, l’image redevient plus pâle.
Pour cela, insérez le code suivant dans le BODY de votre page :
<!-- Code à répéter pour toutes vos images -->
<a href="URL de la page à ouvrir"><img src="http://www.monsite.com/images/logo.gif" border="0" width="109" height="63" style="filter:alpha(opacity=40); -moz-opacity: .4;" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"></a>N’oubliez pas de renseigner les deux paramètres que sont l’URL de la page à ouvrir une fois le lien-image cliqué ( href= ) et la source de votre image ( le src de la balise img ) dans le code ci-dessus.
Pas dur non ?
8 mai 2005
Appliquez un filtre dynamique sur des images
Un effet Neon (II) sur du texte
Affichez un texte qui tremble en Javascript
Ouvrir une popup centrée sur l’écran
Un aura autour de votre texte
Un texte animé dans une boîte
Afficher un texte dans la barre de statut au survol d’un lien
Afficher l’heure courante dans un bouton
Faîtes apparaître un texte de gauche à droite qui s’arrête ensuite
Faîtes défiler des images en boucle (comme une visionneuse)
