begin process at 2008 07 06 04:57:11
1 205 464 membres
43 nouveaux aujourd'hui
14 119 membres club

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum.
Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

FONDU D'IMAGE


Information sur la source

Catégorie :Graphique Classé sous : fondu, image, images Niveau : Débutant Date de création : 26/07/2006 Date de mise à jour : 31/07/2006 20:12:40 Vu : 13 075

Note :
7,5 / 10 - par 2 personnes
7,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (19)
Ajouter un commentaire et/ou une note

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
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à !
  • signaler à un administrateur
    Commentaire de adelami le 26/07/2006 21:48:12

    Bonjour,
    N'oublie pas de fermer ta balise avec un </script> au lieu du <script> oubli de la barre ...
    Sinon, c'est bien fait compatible ff et tout!
    8/10

  • signaler à un administrateur
    Commentaire de proftnj le 31/07/2006 14:59:37

    Avec moi, ça ne fonctionne pas du tout, ni avec IE, ni avec FF. J'ai fermé le balise "script", mais l'image est visible dès le chargement de la page et ne disparaît pas si je clique dessus. J'ai effectué un copier-coller du code dans le bloc-note. Y a-t-il quelque chose à changer?

  • signaler à un administrateur
    Commentaire de jmecodol le 31/07/2006 17:09:46

    je n'ai pas ie sous la main,
    la source est sympa,
    mais le chargement de la page sous Firefox ( pas les évènements javascript ) donnent une érreur javascript :
    - "Propriété filter inconnue. Déclaration abandonnée" .

    donc j'ai enlevé 'style="filter:alpha(opacity=100); -moz-opacity: 1;"', et la attention, ce sont des érreur en boucle infinie ! attention .

    c'est un peu pointilliste de dire ca, mais bon, le code serai parfait si il n'y avait pas d'éreur javascript sous Firefox et ie .

    parfois c'est impossible lol .
    sinon c'est sympa d'avoir mis un eemple qui marche par copié collé sans télécharger une image . ;) .

  • signaler à un administrateur
    Commentaire de dylan_salmon le 31/07/2006 20:21:40

    oui il faut que tu déclares dans la balise sur laquelle tu veux faire un fondu l'opacité par défaut de ton image sinon tu auras une erreur.

    j'ai retesté, et y'a pas de problème, ça fonctionne sur FF et IE

    (l'image apparait au début... cliquez sur l'image pour la faire disparaitre et repasser à l'endroit de l'image pour la faire réapparaitre)

    Bonne soirée !!

  • signaler à un administrateur
    Commentaire de jmecodol le 31/07/2006 20:46:58

    ah non,
    en fait ca marche !!

    c'est sous firefox,
    dans "Outils" => "Console JavaScript" .
    au moment du chargement ...
    ( ou avec F5 ),
    au moment du chargement, il y a une erreur théorique ( vu que le code fait ce qu'on veut ).

    c'est pour ca que c'est vraiment aller au bout des vérifications, comme la Console JavaScript vérifie au poil les normes, même si ca marche, il note les défaults javascript de manière hyper approfondie ;) .

    et normalement ( lol ), si il n'y a pas d'érreur dans la console, c'est portable .
    les érreurs peuvent venir par exemple d'une méthode qui va disparaitre, ou non W3C .

    enfin voila .
    mais ca marche au poil, d'ailleur je vais l'intégrer a un prochain projet hihihihihi ...

    merci .

  • signaler à un administrateur
    Commentaire de proftnj le 31/07/2006 21:20:10

    Les effets de filtres ne font pas partie des recommandations du W3C.
    "cur.filters.alpha.opacity" est une fonction spécifique de IE 6;
    "-moz-opacity" est une fonction spécifique de mozilla et de son clone Firefox.
    Probable que ce script ne donne rien avec Opéra, Safari,... et peut-être même Netscape.
    Tant que ça ne plante rien, il n'y a pas de problème.

  • signaler à un administrateur
    Commentaire de jmecodol le 31/07/2006 21:55:17

    @ prOftnJ :
    merci pour la précision,
    connaître la source d'une trace,
    ca n'a pas de prix, même si le code marche .

    la je dis,
    avec ca, il y a de quoi faire de super éffets .

    si c'était moi, je mettrai quand même cette anecdote en commentaire, le javascript est si puissant (et si incompatible c.f.: prOftnJ::méssage perso. ;)), que beaucoup de ceux qui laissent des codes mettent les précisions qui vont bien .

    encore merci .


      ## un novice javascript .

  • signaler à un administrateur
    Commentaire de atiladiffusion le 17/10/2006 00:08:54

    Par contre moi j'aimerai bien voir le code de ta map, car oi j'ai besoin de mettre plussieurs images, et que lorsque l'on clik sur le numéro de l'image que l'on veut afficher, l'ancienne disparaisse et la nouvelle apparait..
    Tu peux montrer le code?

  • signaler à un administrateur
    Commentaire de atiladiffusion le 17/10/2006 00:25:10

    oups j'ai trouvé grâce à ton script... de test. Merci beaucoup c'est vraiment génial

  • signaler à un administrateur
    Commentaire de atiladiffusion le 17/10/2006 22:49:16

    Bonsoir, y a t'il un moyen de le faire marcher dans Safari?
    Si ce n'est pas possible comment faire pour faire juste apparaitre les images sans effet au moins.

    Merci d'avance

  • signaler à un administrateur
    Commentaire de proftnj le 17/10/2006 23:00:20

    Les effets de filtres n'existent pas pour Safari.
    Pour faire apparaître ou disparaître une image, il faut un script très différent que celui proposé ici. Créer une image transparente qui a les mêmes dimensions que l'image à faire apparaître, puis utiliser les fonctions "onmouseover" et "onmouseout" (ou "onclick"). Ça doit être faisable.

  • signaler à un administrateur
    Commentaire de atiladiffusion le 17/10/2006 23:08:29

    Pourtant j'ai trouvé ca:
    -khtml-opacity: 0.5; /* Safari */
    ici
    http://forum.alsacreations.com/topic-5-2063-1-Opacit--compatible-multi-navigateur-.html

    coment faire pour que si ce n'est pas le bon navig il fait apparaitre sans effet les images.
    c'est pas possible à partir de ton script?

  • signaler à un administrateur
    Commentaire de atiladiffusion le 17/10/2006 23:13:18

    genre: et si c'est safari --> -khtml-opacity: 0 !pour invisible
    et dans invisible--> -khtml-opacity: 1;
    ca ne marcherai pas?

  • signaler à un administrateur
    Commentaire de proftnj le 17/10/2006 23:16:32

    Aha! -khtml-opacity: 0.5; existe pour Safari!
    Je retire ce que j'ai écrit plus haut! Merci pour l'info.
    Et Opera, alors? Et les autres navigateurs?
    C'est énervant!
    dylan_salmon pourrait peut-être compléter son script (moi, j'en suis incapable), Il y aurait compatibilité avec IE, FF et Safari: cela fonctionnerait pour plus de 95 % des internautes, non?

  • signaler à un administrateur
    Commentaire de atiladiffusion le 17/10/2006 23:18:37

    oui c 'est bien ca; le seul hic c'est que je fais un ptit site, et je dois présenter à mon client... qui est sous mac et pc! et moi je sais pas faire

  • signaler à un administrateur
    Commentaire de atiladiffusion le 17/10/2006 23:20:50

    il faut peut etre se diriger vers ca...

    function SetOpacity(elmt, opacity){

      if(elmt.filters){

        elmt.filters.alpha.opacity=opacity

      }else{

        elmt.style.setProperty("-moz-opacity", opacity/100, "");

        elmt.style.setProperty("-khtml-opacity", opacity/100, "");

        elmt.style.setProperty("opacity", opacity/100, "");

      }

  • signaler à un administrateur
    Commentaire de atiladiffusion le 17/10/2006 23:37:12

    et sinon ya ca qui semble etre cohérent mais je ne sais pas le faire.
    http://www.brainerror.net/scripts_js_blendtrans.php
    De l'aide s'il vous plait

  • signaler à un administrateur
    Commentaire de atiladiffusion le 18/10/2006 00:09:03

    j'en suis là, mais ca marche toujours pas... sous mac=safari
    -------------------------------------------

    function visible(){
    vitesseIE=1;
    vitesseFF=60;
    if(document.getElementById) {
    cur=document.getElementById("imageID");
    if(document.all){
    cur.filters.alpha.opacity+=parseFloat(3);
    if (cur.filters.alpha.opacity==100)
    return;
    else
    setTimeout("visible()",vitesseIE);

    }
    else{
    /*i=parseFloat(cur.style.getPropertyValue("-moz-opacity"));test pour safari*/
    i=parseFloat(cur.style.getPropertyValue("-khtml-opacity"));
    i+=parseFloat(0.1);
    /*cur.style.setProperty("-moz-opacity", i, "");test pour safari*/
    cur.style.setProperty("-khtml-opacity", i, "");
    if (i>=1)
    return;
    else
    setTimeout("visible()",vitesseFF);
    }
    }
    }
    function invisible(index){
    vitesseIE=1;
    vitesseFF=60;

    if(document.getElementById) {
    cur=document.getElementById("imageID");

    if(document.all){
    if (index=="1"){
    cur.filters.alpha.opacity=100;
    }
    cur.filters.alpha.opacity-=parseFloat(3);
    if (cur.filters.alpha.opacity==0){
    document.getElementById("imageID").src=document.getElementById("imageID").src2;
    visible();
    return;
    }
    else {
    setTimeout("invisible('0')",vitesseIE);
    }

    }
    else{
    if (index=="1"){
    /*cur.style.setProperty("-moz-opacity", 1, "");test pour safari*/
    cur.style.setProperty("-khtml-opacity", 1, "");
    }
    /*i=parseFloat(cur.style.getPropertyValue("-moz-opacity"));test pour safari*/
    i=parseFloat(cur.style.getPropertyValue("-khtml-opacity"));
    i-=parseFloat(0.1);
    /*cur.style.setProperty("-moz-opacity", i, "");test pour safari*/
    cur.style.setProperty("-khtml-opacity", i, "");
    if (i<=0){
    document.getElementById("imageID").src=document.getElementById("imageID").src2;
    visible();
    return;
    }
    else {
    setTimeout("invisible('0')",vitesseFF);

    }
    }
    }
    }

    function afficher_image(index,image){
    for (i=1;i<5;i++)
    document.getElementById(i).src=img_non_select.src;
    document.getElementById(index).src=img_select.src;

    document.getElementById("imageID").src2=image;
    if (navigator.appName=="Opera"){
    document.getElementById("imageID").src=image;
    }else{
    invisible('1');
    }

    }

    function plus(){
    for (i=1;i<5;i++){
    if (document.getElementById(i).src==img_select.src){
    i++;
    if (i<=4)
    afficher_image(i,eval ("i"+i+".src"));
    return;
    }
    }
    }

    function moins(){
    for (i=1;i<5;i++){
    if (document.getElementById(i).src==img_select.src){
    i--;
    if (i>=1)
    afficher_image(i,eval ("i"+i+".src"));
    return;
    }
    }
    }

  • signaler à un administrateur
    Commentaire de atiladiffusion le 18/10/2006 00:49:20

    c'est trouvé
    ---------------
    <code>

    function visible(){
    vitesseIE=1;
    vitesseFF=60;
    if(document.getElementById) {
    cur=document.getElementById("imageID");
    if(document.all){
    cur.filters.alpha.opacity+=parseFloat(3);
    if (cur.filters.alpha.opacity==100)
    return;
    else
    setTimeout("visible()",vitesseIE);

    }
    else{
    i=parseFloat(cur.style.getPropertyValue("-moz-opacity"));
    i=parseFloat(cur.style.getPropertyValue("opacity"));
    i+=parseFloat(0.1);
    cur.style.setProperty("-moz-opacity", i, "");
    cur.style.setProperty("opacity", i, "");
    if (i>=1)
    return;
    else
    setTimeout("visible()",vitesseFF);
    }
    }
    }
    function invisible(index){
    vitesseIE=1;
    vitesseFF=60;

    if(document.getElementById) {
    cur=document.getElementById("imageID");

    if(document.all){
    if (index=="1"){
    cur.filters.alpha.opacity=100;
    }
    cur.filters.alpha.opacity-=parseFloat(3);
    if (cur.filters.alpha.opacity==0){
    document.getElementById("imageID").src=document.getElementById("imageID").src2;
    visible();
    return;
    }
    else {
    setTimeout("invisible('0')",vitesseIE);
    }

    }
    else{
    if (index=="1"){
    cur.style.setProperty("-moz-opacity", 1, "");
    cur.style.setProperty("opacity", 1, "");
    }
    i=parseFloat(cur.style.getPropertyValue("-moz-opacity"));
    i=parseFloat(cur.style.getPropertyValue("opacity"));
    i-=parseFloat(0.1);
    cur.style.setProperty("-moz-opacity", i, "");
    cur.style.setProperty("opacity", i, "");
    if (i<=0){
    document.getElementById("imageID").src=document.getElementById("imageID").src2;
    visible();
    return;
    }
    else {
    setTimeout("invisible('0')",vitesseFF);

    }
    }
    }
    }
    </code>

Ajouter un commentaire

Pub



Appels d'offres

Plugin Dialer outlook
Budget : 2 000€
Travail graphique- ill...
Budget : 1 000€
creation de marque et ...
Budget : 1 000€

CalendriCode

Juillet 2008
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Téléchargements

Boutique

Boutique de goodies CodeS-SourceS