begin process at 2012 05 28 13:45:20
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Graphique

 > EFFET D'OPACITÉ PROGRESSIF AU PASSAGE DE LA SOURIS

EFFET D'OPACITÉ PROGRESSIF AU PASSAGE DE LA SOURIS


 Information sur la source

Note :
10 / 10 - par 1 personne
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Graphique Niveau :Débutant Date de création :22/02/2003 Date de mise à jour :22/02/2003 19:52:30 Vu / téléchargé :14 884 / 1 182
Auteur : DHKold

Ecrire un message privé
Site perso
Commentaire sur cette source (6)
Ajouter un commentaire et/ou une note

 Description

Voici un petit script pour faire un effet sur les images avec l'opacité.

Source

  • 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)">
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.

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

GÉNÉRER UN NOMBRE ALÉATOIRE
IMPRESSION DE LA PAGE
TEMPS DE CHARGEMENT DE LA PAGE
Source avec Zip FENÊTRE À DISTANCE (AVEC URL D'UNE AUTRE FRAME)
AJOUTER AUX FAVORIS
Toutes les sources de DHKold

 Sources de la même categorie

Source avec Zip JDMATH-MINI.JS : GÉNÉRATION D'EXPRESSION MATHÉMATIQUE par jdmcreator
Source avec une capture SPHERE 3D DÉFORMABLE par phm
Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111
Toutes les sources de la catégorie Graphique

Commentaires et avis

Commentaire de Mumuri le 05/07/2003 17:35:10

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

Commentaire de Mumuri le 05/07/2003 17:37:02

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

Commentaire de meh le 08/07/2005 04:13:14

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

Commentaire de meh le 08/07/2005 04:15:35

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

Commentaire de SaturneVenus le 24/04/2006 15:43:35

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>
<body>
<a class=opacity href=""><img width=200 name=imgtest1 src=opacity.jpg></a>
<a class=opacity href=""><img width=200 name=imgtest1 src=opacity.jpg></a>
<a class=opacity href=""><img width=200 name=imgtest1 src=opacity.jpg></a>
<a class=opacity href=""><img width=200 name=imgtest1 src=opacity.jpg></a>
</body>
</HTML>

Commentaire de stfou le 06/06/2006 08:16:23

<!----------------------------------------------------->
<script>
var opacityLevel=0;
function makevisible(arg1)
{
if(opacityLevel>35&&opacityLevel<101)
{
arg1.filter.alpha.opacity=35+opacityLevel;
opacityLevel++;
}
}
</script>
<img src="opacity.jpg" style="filter:alpha(opacity=35)" onmouseover="window.setInterval('makevisible(this)',10);" onmouseout="this.filters.alpha=35;opacityLevel=0">
<!---------------------------------------------->

Voilà, essaye ça, c'est peut-être plus simple avec le setInterval.
je met 8.

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


Samsung Galaxy Tab (GT-P1000) Tablet PC
Entre 699€ et 699€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 3,448 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)