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.
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)
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
- Effet de filtre compatible mozilla firefox et internet explorer.
- Effet pour miniature - Conseils pratiques -PHP
- Effet vitre illustrator - Forum Graphisme/design
- Vba internet explorer ✓ - Forum Visual Basic 6
- Modele site internet - Conseils pratiques -PHP
- Filtre noir et blanc photoshop - Forum Graphisme/design
27 sept. 2007 à 12:35
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
16 janv. 2007 à 16:01
ç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.