Effet de filtre compatible mozilla firefox et internet explorer.

5/5 (2 avis)

Vue 20 963 fois - Téléchargée 831 fois

Description

Script très simple permettant un effet de filtre au passage de la souris sur un élément.
C'est un script déjà vu ailleurs sous une forme très proche.

Une image (ou tout élément "block": paragraphe, titre,...) change d'aspect au survol de la souris, par exemple d'invisible elle devient visible au passage de la souris puis redevient invisible lorsqu'on la quitte.

L'opacité de départ est évidemment paramétrable. Dans cet exemple, elle est de 20 %, mais on peut écrire 0.

Cette image peut servir de lien (c'est du html).
Autant d'images que vous voulez, mais elles présenteront toutes le même effet "onmouseover" et "onmouseout".

Ce script n'est pas valide selon les spécifications du W3C, mais est compatible Internet Explorer et Firefox.
Je n'ai pas pu vérifier avec d'autres navigateurs comme Opera ou Safari.

Source / Exemple :


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Calque compatible IE et FF</title>
</head>

<script language="JavaScript1.2">
//0.2 signifie 20 % de visibilité; pour une image invisible, écrire 0 à la place de 0.2
//ATTENTION: pour l'image, il faut changer ces paramètres aussi:
// style="filter:alpha(opacity=20);-moz-opacity:0.2" devient
// style="filter:alpha(opacity=0);-moz-opacity:0" pour une image invisible au départ
function rendrevisible(timide,superman)
{
force=(superman==0)? 1 : 0.2

if (timide.style.MozOpacity)
timide.style.MozOpacity=force
else if (timide.filters)
timide.filters.alpha.opacity=force*100
}

</script>

<body>

<!-- pour une image invisible, modifier: style="filter:alpha(opacity=0);-moz-opacity:0" -->
<img src="http://www.javascriptfr.com/gfx/logos/logojs.gif" 
alt="SURPRISE !" title="SURPRISE !" 
border="0" width="193" height="73"
style="filter:alpha(opacity=20);-moz-opacity:0.2"
onmouseover="rendrevisible(this,0)"
onmouseout="rendrevisible(this,1)"><br>

<!-- Vous pouvez effacer ceci: -->
<span style="font-family: Verdana,Arial,Helvetica; font-size:12px;font-weight:bold;">
Passez le curseur ci-dessus!
</span>
<!-- Fin de la partie que vous pouvez effacer -->

</body>
</html>

Conclusion :


Ne vous étonnez pas des noms que je donne aux fonctions: timide (l'image est cachée), superman (il a de la force).
Si ce script est déjà présent sur ce site, il faudra l'enlever (et je présenterai mes excuses).

0.2 signifie 20 % de visibilité; pour une image invisible, écrire 0 à la place de 0.2

ATTENTION: pour l'image, il faut changer ces paramètres aussi:
style="filter:alpha(opacity=20);-moz-opacity:0.2"
devient
style="filter:alpha(opacity=0);-moz-opacity:0" (image invisible)

Codes Sources

A voir également

Ajouter un commentaire Commentaires
cs_annaly Messages postés 1 Date d'inscription jeudi 27 septembre 2007 Statut Membre Dernière intervention 27 septembre 2007
27 sept. 2007 à 12:35
Salut,
Merci beaucoup pour ce code. J'essaye de l'adapter afin de passer d'une image de 1 a 0.2 (dans ton exemple de 0.2 a 1) mais ca ne marche pas, peux tu m'equiller?
Merci d'avance,
Anne-Laure
DuClik Messages postés 10 Date d'inscription vendredi 25 novembre 2005 Statut Membre Dernière intervention 23 juin 2010
16 janv. 2007 à 16:01
Quel est l'interet ?
ça se gere tout aussi bien dans le css avec un

a:hover {
filter:alpha(opacity=60);
-moz-opacity:0.6;
opacity: 0.6;
}

pour changer l'opacité à 60% par exemple.

L'interet serait d'avoir un effet "fondu"

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.