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.
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.
- [VBS] Démarrer Firefox ou Internet Explorer sur une page précise ? ✓ - Forum - Visual Basic
- Création d'une extension pour mozilla firefox - Conseils pratiques - Javascript
- Flash : Logo internet explorer vectoriel, avec effet de brillance - CodeS SourceS - Guide
- menu pour click droit compatible mozilla & ie - Codes sources - Javascript (Menu & Co)
- Javascript : L'easter-egg de microsoft internet explorer (rendu compatible !) - CodeS SourceS - Guide
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
ç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.