Effet de filtre compatible mozilla firefox et internet explorer.

Soyez le premier à donner votre avis sur cette source.

Vue 20 835 fois - Téléchargée 819 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
Messages postés
1
Date d'inscription
jeudi 27 septembre 2007
Statut
Membre
Dernière intervention
27 septembre 2007

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
Messages postés
10
Date d'inscription
vendredi 25 novembre 2005
Statut
Membre
Dernière intervention
23 juin 2010

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.