Effet d'opacité progressif au passage de la souris
Soyez le premier à donner votre avis sur cette source.
Vue 17 364 fois - Téléchargée 1 294 fois
Description
Voici un petit script pour faire un effet sur les images avec l'opacité.
Je mets un exemple dans le zip.
Source / Exemple :
Dans la partie <HEAD></HEAD>:
<SCRIPT>
function makevisible(){
if (cur.filters.alpha.opacity<35) cur.filters.alpha.opacity =35;
if (cur.filters.alpha.opacity>100) cur.filters.alpha.opacity =100;
cur.filters.alpha.opacity=cur.filters.alpha.opacity+which;
vitessedefil = setTimeout("makevisible()", 10);
}
function makeopt(arg1,arg2)
{which=arg1;
cur=arg2;
}
</SCRIPT>
----------------------------------------------------------------------
Pour BODY:
<BODY onload="makeopt(-10,imgtest1);makevisible()" onunload="clearTimeout(vitessedefil)">
----------------------------------------------------------------------
Exemple dutilistion dans une image:
<IMG WIDTH=200 NAME=imgtest1 SRC=opacity.jpg style="filter:alpha(opacity=35)" onmouseout="which=0;this.filters.alpha.opacity=35" onmouseover="makeopt(10,this)">
Conclusion :
Je mets un exemple dans le zip.
Codes Sources
A voir également
- Effet d'opacité progressif au passage de la souris
- Effet loupe au passage de la souris - Guide
- Effet image au passage de la souris - Codes sources - Flash (Effets d'images)
- Modifier l'opacité d'un formulaire au passage de la souris - Codes sources - Visual Basic / VB.NET (Formulaire)
- Opacité progressive ✓ - Forum - Flash
- Les barres de défilement changent de couleur au passage de la souris - Codes sources - Javascript (Effets)
Commentaires
- Messages postés
- 320
- Date d'inscription
- mercredi 9 octobre 2002
- Statut
- Membre
- Dernière intervention
- 6 avril 2008
-http://site.voila.fr/topflood/skinforum/ds_fichiers/mumuri.jpg
- Messages postés
- 320
- Date d'inscription
- mercredi 9 octobre 2002
- Statut
- Membre
- Dernière intervention
- 6 avril 2008
-- Messages postés
- 66
- Date d'inscription
- dimanche 18 août 2002
- Statut
- Membre
- Dernière intervention
- 9 juillet 2007
-Regarde sur ce site http://www.javascript-fx.com/index.php?page=scripts en haut à droite et tu verras un script d'opacity qui marchent aussi sur des navigateurs autres que MIE, puisqu'il faut ajouter un "moz-opacity" particulier pour que ça marche sur ces Mozilla et Firefox ...Pourquoi ? Toujours la même question sans réponse !
Et quid dans tout e m... des autres navigateurs, je pense ici avant à Safari (Mac) et à Opéra, et sur Mac en général ...???
- Messages postés
- 66
- Date d'inscription
- dimanche 18 août 2002
- Statut
- Membre
- Dernière intervention
- 9 juillet 2007
-Et quid dans tout ce m... des autres navigateurs ??? ...Je pense ici avant tout à Safari (Mac) et à Opéra, à MIE ou Firefox sur Mac aussi.
- Messages postés
- 4
- Date d'inscription
- mercredi 5 février 2003
- Statut
- Membre
- Dernière intervention
- 12 octobre 2006
-Pour les autres navigateurs, la solution avec les css :
http://www.peutetreunereponse.net/article-727713.html
Appliqué au cas d'école ici présent, cela donne ceci :
Feuille de style opacity.css :
a.opacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
a.opacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
Page html :
<HTML>
<head>
<title>Opacity</title>
<link media=screen href="opacity.css" rel="stylesheet" type="text/css" />
</head>
[
]
[
]
</HTML>
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.