Accueil > > > FONDU D'IMAGE
FONDU D'IMAGE
Information sur la source
Description
petit code tout simple permettant un fondu d'image... mettre juste un id sur l'image ("imageID") passer la souris sur l'image pour faire apparaitre et cliquez pour faire disparaitre l'image en fondu pour plus d'information voici un exemple utilisé pour le site que je m'occupe : http://www.cordonweb.com/societe/carte_dinan.php
Source
- <html>
- <head>
- <script language="javascript">
- function visible(){
- vitesseIE=20;
- vitesseFF=60;
- if(document.getElementById) {
- cur=document.getElementById("imageID");
-
- if(document.all){
- cur.filters.alpha.opacity++;
- if (cur.filters.alpha.opacity==100)
- return;
- else
- setTimeout("visible()",vitesseIE);
-
- }
- else{
- i=parseFloat(cur.style.getPropertyValue("-moz-opacity"));
- i+=parseFloat(0.1);
- cur.style.setProperty("-moz-opacity", i, "");
- if (i>=1)
- return;
- else
- setTimeout("visible()",vitesseFF);
- }
- }
- }
- function invisible(){
- vitesseIE=20;
- vitesseFF=60;
- if(document.getElementById) {
- cur=document.getElementById("imageID");
-
- if(document.all){
- cur.filters.alpha.opacity--;
- if (cur.filters.alpha.opacity==0)
- return;
- else
- setTimeout("invisible()",vitesseIE);
-
- }
- else{
- i=parseFloat(cur.style.getPropertyValue("-moz-opacity"));
- i-=parseFloat(0.1);
- cur.style.setProperty("-moz-opacity", i, "");
- if (i<=0)
- return;
- else
- setTimeout("invisible()",vitesseFF);
- }
- }
- }
- </script>
- </head>
- <body>
- <IMG id="imageID" SRC="http://www.javascriptfr.com/gfx/logos/logojs.gif" BORDER=0 WIDTH=109 HEIGHT=63 style="filter:alpha(opacity=100); -moz-opacity: 1;" onMouseover="visible()" onClick="invisible()">
- </body>
<html>
<head>
<script language="javascript">
function visible(){
vitesseIE=20;
vitesseFF=60;
if(document.getElementById) {
cur=document.getElementById("imageID");
if(document.all){
cur.filters.alpha.opacity++;
if (cur.filters.alpha.opacity==100)
return;
else
setTimeout("visible()",vitesseIE);
}
else{
i=parseFloat(cur.style.getPropertyValue("-moz-opacity"));
i+=parseFloat(0.1);
cur.style.setProperty("-moz-opacity", i, "");
if (i>=1)
return;
else
setTimeout("visible()",vitesseFF);
}
}
}
function invisible(){
vitesseIE=20;
vitesseFF=60;
if(document.getElementById) {
cur=document.getElementById("imageID");
if(document.all){
cur.filters.alpha.opacity--;
if (cur.filters.alpha.opacity==0)
return;
else
setTimeout("invisible()",vitesseIE);
}
else{
i=parseFloat(cur.style.getPropertyValue("-moz-opacity"));
i-=parseFloat(0.1);
cur.style.setProperty("-moz-opacity", i, "");
if (i<=0)
return;
else
setTimeout("invisible()",vitesseFF);
}
}
}
</script>
</head>
<body>
<IMG id="imageID" SRC="http://www.javascriptfr.com/gfx/logos/logojs.gif" BORDER=0 WIDTH=109 HEIGHT=63 style="filter:alpha(opacity=100); -moz-opacity: 1;" onMouseover="visible()" onClick="invisible()">
</body>
Conclusion
exemple : http://www.cordonweb.com/societe/carte_dinan.php
Historique
- 26 juillet 2006 12:00:50 :
- mise à jour : j'avais oublié de mettre vitesseIE=20; et vitesseFF=60; pour la fonction invisible
- 31 juillet 2006 20:12:40 :
- en effet petit oubli de fermeture de la balise script !! OOOoouupss ! j'étais un peu pressé le jour là !
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
changer des images dans un menu [ par bblein ]
j'élabore un petit menu où lorsque je clique sur une image-rubrique, une flèche (image) vient se placer dessous pour indiquer que l'on se situe bien d
Précision: Pb netscape image en couche avec netscape [ par philou7 ]
Je crée des cartographies en disposant des images en couches dans des balise <div>.Lorsque ces images sont placées dans une frame d'attribut "sc
Insérer une image selon un résultat mathématique [ par tweeder ]
Bonjour,Je m'explique car mon sujet n,est pas très révélateur. Je dois créer une page qui fait des calculs mathématiques et jai pensé insérer des imag
Interversion d'images de tailles différentes sous Netscape [ par philou7 ]
Bonjour,Dans ma page, une image définie dans une balise <img> sans option de dimension, est remplacée par d'autres images de tailles différente
ajouter image [ par dragon ]
Je suis en train de faire un site admin en php, mais je dois faire une formulaire pour ajouter des itemsjusqu'ici tout vas très bien, sauf les item on
Précharger des images ? [ par TheRedman ]
J'ai un menu et quand la souris passe dessus l'image change. J'ai essayé avec une image plus lourde (250 ko) et il faut plusieurs secondes avant qu'el
onMouseClick [ par gini333 ]
bonjour,je débute en javascript et j'ai une question super facile (bien que je ne sais la résoudre...) : je suis en train de créer un album photos pou
mauvais fonctionnement du cache avec les images pre-chargees [ par sunelis ]
Bonjour à tousle site que je réalise est hebergé sur un serveur IIS et j'ai différents boutons réalisés à partir de deux images (une dans la position
popup image [ par swiss_cheese10 ]
Salut le people ! Bon alors voici mon prob...Sur mon futur site, j'ai pas mal d'images et j'aimerais que quand l'utilisateur clique sur une image, un
visualiser une image [ par orionis ]
Bonjour,Pour mon site, je voudrais afficher des images à partir d'une page de vignettes.Pour l'instant, la ligne de commande est simplement :<A HRE
|
Derniers Blogs
L'INTERFACE NATURELLE DE WINDOWS PHONE 7 SERIESL'INTERFACE NATURELLE DE WINDOWS PHONE 7 SERIES par odewit
La tendance est aux interfaces naturelles (NUI), et le keynote de Bill Buxton au MIX l'a bien souligné.
La charte graphique et ergonomique de Windows Phone 7 a donc été entièrement repensée en vue d'obtenir un maximum d'efficacité sur ce point. En re...
Cliquez pour lire la suite de l'article par odewit COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE?COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE? par Matthieu MEZIL
Avec EF, les vues doivent être mappées sur des entity types. Le problème c'est que les entity types doivent avoir une clé. Avec EF, nous avons les complex type qui n'ont pas de clé mais les vues ne peuvent pas être mappées dessus. Avec EF4, il est possibl...
Cliquez pour lire la suite de l'article par Matthieu MEZIL [WF4] UN BINDING ACTIVITY/ACTIVITYDESIGNER QUI PASSE MAL?[WF4] UN BINDING ACTIVITY/ACTIVITYDESIGNER QUI PASSE MAL? par JeremyJeanson
Certain d'entre vous on peut être vécu cette situation embarrassante après quelques temps passer avec WF4 : Au début avec mon " ActivityDesigner" , tout allait bien. Et puis un jour j'ai au des problèmes de " Binding" . Alors nous sommes allé sur le site ...
Cliquez pour lire la suite de l'article par JeremyJeanson
Logiciels
Academy System (10.9.4.0)ACADEMY SYSTEM (10.9.4.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise... Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate Xilisoft DVD Ripper Ultimate (5.0.64.0304)XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ... Cliquez pour télécharger Xilisoft DVD Ripper Ultimate Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods
|