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é.

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

Ajouter un commentaire

Commentaires

Mumuri
Messages postés
320
Date d'inscription
mercredi 9 octobre 2002
Statut
Membre
Dernière intervention
6 avril 2008
-
c'est intéréssant mais ca sert a rien ;), sait tu s'il serait possible de modifier ton script de maniére a ce qu'il fasse un dégradé d'opacité ... ce qui permettrait alors un effet de verre bombé, type

http://site.voila.fr/topflood/skinforum/ds_fichiers/mumuri.jpg
Mumuri
Messages postés
320
Date d'inscription
mercredi 9 octobre 2002
Statut
Membre
Dernière intervention
6 avril 2008
-
je retire ce que j'ai di ca a quand méme son utilité dans le cas d'une gallerie d'image quand on veut mettre en valeur une image
cs_meh
Messages postés
66
Date d'inscription
dimanche 18 août 2002
Statut
Membre
Dernière intervention
9 juillet 2007
-
Salut ! Oui en effet ça peut avoir un effet assez cool dans une galerie d'images ou de miniatures. Merci pour le script mais ça ne marche pas avec Mozilla/Firefox, donc laisse tomber la pluie...

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 ...???
cs_meh
Messages postés
66
Date d'inscription
dimanche 18 août 2002
Statut
Membre
Dernière intervention
9 juillet 2007
-
(désolé pour ma dernière phrase, il fallait lire ceci : )

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.
SaturneVenus
Messages postés
4
Date d'inscription
mercredi 5 février 2003
Statut
Membre
Dernière intervention
12 octobre 2006
-
L'idée de départ est intéressante.
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.