Accueil > > > EFFET DE FILTRE COMPATIBLE MOZILLA FIREFOX ET INTERNET EXPLORER.
EFFET DE FILTRE COMPATIBLE MOZILLA FIREFOX ET INTERNET EXPLORER.
Information sur la source
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.
Source
- <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>
<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-opacit y:0.2" devient style="filter:alpha(opacity=0);-moz -opacity:0" (image invisible)
Historique
- 01 août 2006 03:21:46 :
- J'ai ajouté des explications dans la page et permis de la télécharger en .zip
- 01 août 2006 03:45:59 :
- "Filtre" a remplacé "Calque" (confusion)
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
Calque et centrage [ par Liothan ]
Bonjour, J'ai recup un script pour charger des images dans un calque. J ai reussi a le modifier pour placer le calque a l endroit ou je veux mais me
Help ! Probleme de taille d'image dans popup... [ par franck453 ]
Bonjour,J'ai repiqué une partie de code sur un site, car il correspondait bien à ce que je voulais faire...A savoir : au survole d'un lien,
Probleme sur : Script qui affiche un calque a un endroit precis conternant une grand image quand on onmouseover une petite. [ par westernz ]
Bonjour, J'ai remixer un script pour que ca marce avec des images, toutefois j'ai un soucis, des que je scorll ma page la grand image se place pas la
Déplacement calque et "NomDiv IS NOT DEFINED"... [ par mario_a_nantes ]
Salut!Je me met doucement au javascript et ... j'ai un PROBLEMEJe souhaite déplacer un calque suivant des coordonnées que je calcule, tout en garantis
Faire un flipH compatible avec IE et Firefox [ par c0v3r ]
Bonjour tout le monde,Je me retrouve devant un problème qui je sais peut être résolu mais je ne trouve pas de piste.Voilà j'ai une image dans un <t
Sauver une image modifier(avec un filtre par exemple) [ par Isiss ]
Bonsoir, est il possible de sauvegarder une image qu'on vient de modifier avec l'utilisation d'un filtre quelconque?
rollover + ouverture image calque [ par pointup ]
Bonjour,J' y suis presque arrivé......j'ai installé un script pour afficher comme je le voulais une image dans un calque à partir d'un lien . Mais,je
Accéder à un tableau [ par Radiohead4ever ]
Salut. J'espère avoir choisi le bon Thème, sinon je m'en excuse...Vous savez ces petits javascripts qui permettent au passage de la souris de changer
popup image ie6 firefox [ par alligo ]
Bonjour à tous,je ne connais quasi rien de javascript j'ai juste pris un script sur un site qui le proposait et je l'ai recopié.j'ai un petit probleme
[AIDE]Problème avec un calque et fonction Onmouseover ? [ par masta64 ]
Bonjour à tous, voila je débute et je suis entrain de construire mon site perso et je me trouve devant un probléme que je n'arrive pas à regler et ca
|
Derniers Blogs
[TECHDAYS 2010] #03 - WEB CONTENT MANAGEMENT SOUS SHAREPOINT 2010[TECHDAYS 2010] #03 - WEB CONTENT MANAGEMENT SOUS SHAREPOINT 2010 par pierre
Stephane Cordonnier de MCNext nous présente les fonctionnalités Web Content Management (WCM) sous SharePoint 2010. Qu'est-ce que le WCM ECM, GED, RM, WCM c'est quoi Plateforme SharePoint Versions SharePoint 2010 SharePoint Fondation...
Cliquez pour lire la suite de l'article par pierre [DESIGN PATTERNS] PARTIE 2: DIP: DEPENDENCY INVERSION PRINCIPLE[DESIGN PATTERNS] PARTIE 2: DIP: DEPENDENCY INVERSION PRINCIPLE par tja
C'est le dernier principe des principes du Design Orienté Objet (The Principles of Object Oriented Design) fondés par Robert C. Martin plus connu sous le pseudonyme d'Uncle Bob.
l'image empruntée de LosTechies.
Je ne traite pas les principes dans...
Cliquez pour lire la suite de l'article par tja TECHDAYS PARIS 2010 : SHAREPOINT 2010 POUR LES DéVELOPPEURSTECHDAYS PARIS 2010 : SHAREPOINT 2010 POUR LES DéVELOPPEURS par ROMELARD Fabrice
Animé par: Laurent Cotton Le développement dans SharePoint 2010 passe par plusieurs axes qui seront évoqués dans cette session, mais plus particulièrement les développements simples lié au besoin Business Business Connectivity Services Ce BCS es...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice TECHDAYS PARIS 2010 : PLEINIèRE DERNIER JOURTECHDAYS PARIS 2010 : PLEINIèRE DERNIER JOUR par ROMELARD Fabrice
Cette session est la dernière pleinière de ces 3 jours de TechDays Paris 2010. Généralement, cette troisième journée est plus axée sur l'avenir vu par Microsoft. Après un retour sur l'avenir vu par la Science Fiction ou par ...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice UNE JOLIE-HORLOGE ET PAS QU'UN PEU !UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante
Pour les possesseurs d'iPhone, ça y est Bijin Tokei - qui se traduit littéralement en Français par " Jolie Horloge " - est arrivé et GRATUITEMENT s'il vous plaît ! Après la version Tokyo, Hokkaido, night club, racing, Gal, "pour les mademoiselles'", . voi...
Cliquez pour lire la suite de l'article par neodante
Logiciels
DB-MAIN (9.1.0)DB-MAIN (9.1.0)DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal... Cliquez pour télécharger DB-MAIN Xilisoft DPG Convertisseur (5.1.37.0120)XILISOFT DPG CONVERTISSEUR (5.1.37.0120)Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé... Cliquez pour télécharger Xilisoft DPG Convertisseur GraphicsGale (2.01.01)GRAPHICSGALE (2.01.01)GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ... Cliquez pour télécharger GraphicsGale Architecte 3D (Platinum 2010)ARCHITECTE 3D (PLATINUM 2010)Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é... Cliquez pour télécharger Architecte 3D TeamViewer 5 (TeamViewer 5)TEAMVIEWER 5 (TEAMVIEWER 5)Dépanner un ami,expliquer une manipulation devient un jeu d'enfant.
Prise en main d'un autre ord... Cliquez pour télécharger TeamViewer 5
|