begin process at 2012 02 06 00:52:44
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > EFFET DE FILTRE COMPATIBLE MOZILLA FIREFOX ET INTERNET EXPLORER.

EFFET DE FILTRE COMPATIBLE MOZILLA FIREFOX ET INTERNET EXPLORER.


 Information sur la source

Note :
6,25 / 10 - par 4 personnes
6,25 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Classé sous :filtre, calque, compatible, image, filtres Niveau :Débutant Date de création :01/08/2006 Date de mise à jour :01/08/2006 03:45:59 Vu / téléchargé :18 626 / 725
Auteur : proftnj

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

 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)


 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


 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

Source avec Zip Source avec une capture SHOWMAPAREA par phidelum
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600
TAILLE DE TEXTE EN FONCTION DE LA RÉSOLUTION par tefa24600
Toutes les sources de la catégorie Effets

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture DIAPORAMA SIMPLE PAR IFRAME par sartoz
Source avec Zip ROTATION D'UNE IMAGE, ANIMATION par william voirol
Source avec Zip IMAGES DÉFILANT SUR UN CYLINDRE (SCROLLING IMAGES) par william voirol
Source avec Zip Source avec une capture MISE EN CACHE D'IMAGES AUTO [AJAX] par Allan007
BOUTONS A À Z OU 0 À 9 par jpclutier

Commentaires et avis

Commentaire de DuClik le 16/01/2007 16:01:23

Quel est l'interet ?
ça se gere tout aussi bien dans le css avec un

a:hover {
filter:alpha(opacity=60);
-moz-opacity:0.6;
opacity: 0.6;
}

pour changer l'opacité à 60% par exemple.

L'interet serait d'avoir un effet "fondu"

Commentaire de annaly le 27/09/2007 12:35:36

Salut,
Merci beaucoup pour ce code. J'essaye de l'adapter afin de passer d'une image de 1 a 0.2 (dans ton exemple de 0.2 a 1) mais ca ne marche pas, peux tu m'equiller?
Merci d'avance,
Anne-Laure

 Ajouter un commentaire


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&#233; une partie de code sur un site, car il correspondait bien &#224; 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 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? 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 &lt;t 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


Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Underwater View of the Ocean With LIght Shining Through the WavePhoto Saintes Maries de la Mer vue du ciel (13)
Photo Bright Beautiful Daisy and Grass Field 

Visiter la photothèque
 
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 : 4,602 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)