Effet de filtre compatible mozilla firefox et internet explorer.
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.
- Modèle de site internet - Conseils pratiques -PHP
- Effet miroir photo en ligne - Forum Visual Basic
- Self.location.href mozilla ✓ - Forum Javascript / DHTML
- Effet verre illustrator - Forum Graphisme/design
- Test connection internet - Forum Delphi / Pascal
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.