IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

première image en Fondu


Sujet :

JavaScript

  1. #1
    Membre éprouvé
    Profil pro
    Développeur .NET
    Inscrit en
    Novembre 2010
    Messages
    127
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2010
    Messages : 127
    Par défaut première image en Fondu
    Bonjour,
    Je suis novice en js. Mon problème est le suivant: j'ai intégré une fonction fadepic à mon code mais j'aimerais empêcher les images d'apparaitre une première fois avant que le fondu ne s'enclenche... Comment faire?
    Voici mon code:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    <html>
     
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <link rel="stylesheet" type="text/css" href="style2.css">
    <title>Fading Pic</title>
     
    </head>
     
    <body> 
    <div id= "img0">
    <img id="C3a" src="http://www.developpez.net/forums/images/img/C3a.jpg" width=225 height=150 style="-moz-opacity:0;filter:alpha(opacity=0)">
    </div>
    <div id ="img1"><img id="R1a" src="http://www.developpez.net/forums/images/img/R1a.jpg" width=225 height=150 style="-moz-opacity:0;filter:alpha(opacity=0)"></div>
    <div id ="img2"><img id="W2a" src="http://www.developpez.net/forums/images/img/W2a.jpg" width=225 height=150 style="-moz-opacity:0;filter:alpha(opacity=0)"></div>
    </body>
     
    <script>
    var max = 100;
    var min = 0;
    var opacite=min;
    up=true;
    var IsIE=!!document.all;
    var ThePic=document.getElementById;
     
    function fadePic(){        
                    if (opacite<max && up){opacite+=2;}
                    if (opacite>min && !up){opacite-=2;}
                    if (opacite>=max){up=false;}
                    if (opacite<=min){up=true;}
     
    IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("W2a").style.opacity=opacite/100;
    IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("R1a").style.opacity=opacite/100;
    IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("C3a").style.opacity=opacite/100;
    document.getElementById('result').value=opacite+"%"
    }
    setInterval(function(){fadePic();},100)
     
    </script>
    </body>
    </html>

  2. #2
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par défaut
    Tu peux éventuellement essayer d'ajouter à leur propriété style l'élément
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    visibility: hidden;
    , de placer le code JS (celui présent actuellement dans ta balise script) dans une fonction que tu appelles depuis le onload du body, sans oublier de rétablir la visibility à "visible" avant d'exécuter fadePic ^^

  3. #3
    Membre éprouvé
    Profil pro
    Développeur .NET
    Inscrit en
    Novembre 2010
    Messages
    127
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2010
    Messages : 127
    Par défaut march pô
    Si je suis ton raisonnement:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
     
    <html>
     
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <link rel="stylesheet" type="text/css" href="style2.css">
    <title>Fading Pic</title>
    <script language="Javascript">
    function fondu(){
    var max = 100;
    var min = 0;
    var opacite=min;
    up=true;
    var IsIE=!!document.all;
    var ThePic=document.getElementById;
     
    function fadePic(){		
    				if (opacite<max && up){opacite+=2;}
    				if (opacite>min && !up){opacite-=2;}
    				if (opacite>=max){up=false;}
    				if (opacite<=min){up=true;}
     
    IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("W2a").style.opacity=opacite/100;
    IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("R1a").style.opacity=opacite/100;
    IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("C3a").style.opacity=opacite/100;
    document.getElementById('result').value=opacite+"%"
    }
    setInterval(function(){fadePic();},100)
    }
     
    </script>
    </head>
     
    <body onLoad="fondu();"> 
    <div id= "img0">
    <img id="C3a" src="images/img/C3a.jpg" width=225 height=150 style="-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;">
    </div>
    <div id ="img1"><img id="R1a" src="images/img/R1a.jpg" width=225 height=150 style="-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;"></div>
    <div id ="img2"><img id="W2a" src="images/img/W2a.jpg" width=225 height=150 style="-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;"></div>
    </body>
    </html>
    ...Mais voilà elles sont cachées... donc j'ai du placer mon hidden au mauvais endroit...

  4. #4
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par défaut
    Citation Envoyé par chadoum Voir le message
    ...Mais voilà elles sont cachées... donc j'ai du placer mon hidden au mauvais endroit...
    Non, il est très bien ^^

    Mais tu as dû "zapper" ma remarque :
    Citation Envoyé par RomainVALERI Voir le message
    , sans oublier de rétablir la visibility à "visible" avant d'exécuter fadePic ^^

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    function fondu(){
    var max = 100;
    var min = 0;
    var opacite=min;
    up=true;
    var IsIE=!!document.all;
    var ThePic=document.getElementById;
    
    var liste_id = ["W2a", "R1a", "C3a"];// solution "en dur", tirée de ton exemple, 
    // mais il vaudrait mieux les récupérer dans l'arbre DOM, notamment avec un 
    // getElementsByTagName opérant sur le résultat d'un getElementById... 
    // on pourra voir ça dans un second temps ^^
    // ou même avec une classe CSS ? 
    // ou en "parsant" les id de toutes les images pour retrouver un préfixe particulier...
    // ce ne sont pas les solutions qui manquent...
    for (var i = 0, iMax = liste_id.length; i < iMax; ++i) {
       document.getElementById(liste_id[i]).style.visibility = "visible";
    }
    
    function fadePic(){		
    				if (opacite<max && up){opacite+=2;}
    				if (opacite>min && !up){opacite-=2;}
    				if (opacite>=max){up=false;}
    				if (opacite<=min){up=true;}
    	
    IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("W2a").style.opacity=opacite/100;
    IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("R1a").style.opacity=opacite/100;
    IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("C3a").style.opacity=opacite/100;
    document.getElementById('result').value=opacite+"%"
    }
    setInterval(function(){fadePic();},100)
    }
    Je n'ai pas testé mais ça correspond mieux à la solution que je décrivais

  5. #5
    Membre éprouvé
    Profil pro
    Développeur .NET
    Inscrit en
    Novembre 2010
    Messages
    127
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2010
    Messages : 127
    Par défaut aaaaaaargh
    Si je te suis et que je n'oublie rien ! ça donne ça:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
     
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <link rel="stylesheet" type="text/css" href="style2.css">
    <title>Fading Pic</title>
    <script language="Javascript">
    function fondu()
    {
    var max = 100;
    var min = 0;
    var opacite=min;
    up=true;
    var IsIE=!!document.all;
    var ThePic=document.getElementById;
    var liste_id = ["W2a", "R1a", "C3a"];
    for (var i = 0, iMax = liste_id.length; i < iMax; ++i) 
    {document.getElementById(liste_id[i]).style.visibility = "visible";}
     
     function fadePic(){		
    				if (opacite<max && up){opacite+=2;}
    				if (opacite>min && !up){opacite-=2;}
    				if (opacite>=max){up=false;}
    				if (opacite<=min){up=true;}
     
    IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("W2a").style.opacity=opacite/100;
    IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("R1a").style.opacity=opacite/100;
    IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("C3a").style.opacity=opacite/100;
    document.getElementById('result').value=opacite+"%"
    }
    setInterval(function(){fadePic();},100)
    }
    </script>
    </head>
     
    <body onLoad="fondu();"> 
    <div id= "img0">
    <img id="C3a" src="images/img/C3a.jpg" width=225 height=150 style="-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;">
    </div>
    <div id ="img1"><img id="R1a" src="images/img/R1a.jpg" width=225 height=150 style="-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;"></div>
    <div id ="img2"><img id="W2a" src="images/img/W2a.jpg" width=225 height=150 style="-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;"></div>
    </body>
    </html>
    Mais l'image reste toujours...

  6. #6
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par défaut
    Ah zut...

    Il faut dire que l'ensemble du code date visiblement de nombreuses années... il y a beaucoup d'irrégularités, ça rend tout diagnostic d'autant plus difficile

    Par curiosité, où as-tu "trouvé" cette fonction ?

  7. #7
    Membre éprouvé Avatar de vrd-74
    Profil pro
    Inscrit en
    Novembre 2010
    Messages
    76
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2010
    Messages : 76
    Par défaut
    Bonjour

    Pour que les images soient bien initialisées en opacité 0 sur firefox (et la plupart des navigateurs modernes), il faut utiliser la propriété opacity.
    Cela donne donc :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <body onLoad="fondu();"> 
    <div id= "img0">
    <img id="C3a" src="images/img/C3a.jpg" width=225 height=150 style="opacity:0;-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;">
    </div>
    <div id ="img1"><img id="R1a" src="images/img/R1a.jpg" width=225 height=150 style="opacity:0;-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;"></div>
    <div id ="img2"><img id="W2a" src="images/img/W2a.jpg" width=225 height=150 style="opacity:0;-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;"></div>
    </body>
    J'ai testé, cela fonctionne de mon côté.

  8. #8
    Membre éprouvé
    Profil pro
    Développeur .NET
    Inscrit en
    Novembre 2010
    Messages
    127
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2010
    Messages : 127
    Par défaut yes!
    ça fonctionne! Merci
    Pour info le code vient de SpaceFrog http://www.developpez.net/forums/d32...du-javascript/ et date de 2007

  9. #9
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par défaut
    Citation Envoyé par chadoum Voir le message
    Pour info le code vient de SpaceFrog et date de 2007
    En lisant ta réponse, première réaction : n'importe quoi...SpaceFrog ?
    ... mais en regardant l'original de plus près on y trouve quelques détails qui changent quand même ^^

    Notamment, au début de ce post je me suis longuement demandé à quoi servait la ligne suivante, et surtout pourquoi il était plus tard fait référence à thePic comme à un élément (vraisemblablement l'image)...
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    var ThePic=document.getElementById;
    ...et la solution c'est qu'il n'y avait rien à comprendre

    >>> en fait il manquait juste un tout petit quelque chose de l'exemple de SF :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    var ThePic=document.getElementById("spaffySpecial");
    En tout cas content que ça fonctionne c'est le principal

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. saut d'image avec fondu dans diaporama
    Par hellspawn_ludo dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 11/01/2010, 09h21
  2. [Image] transparence/ fondu
    Par laclac dans le forum AWT/Swing
    Réponses: 5
    Dernier message: 13/07/2007, 11h58
  3. Réponses: 4
    Dernier message: 27/03/2007, 18h55
  4. Flash transition images en fondu
    Par lulucious dans le forum Flash
    Réponses: 8
    Dernier message: 25/09/2006, 19h48
  5. Extraire la première image d'une vidéo
    Par hutchuck dans le forum Bibliothèques et frameworks
    Réponses: 4
    Dernier message: 19/12/2005, 18h36

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo