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 :

compatibilite de script de fondu


Sujet :

JavaScript

  1. #1
    Membre éclairé Avatar de Aquellito
    Développeur informatique
    Inscrit en
    Juin 2008
    Messages
    337
    Détails du profil
    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Juin 2008
    Messages : 337
    Par défaut compatibilite de script de fondu
    Bonjour,

    J'ai un souci avec une fonction que j'avoue j'ai piqué sur le web (d'où ma plus grande difficulté à résoudre mon problème).
    Celle-ci sert à faire un défilement d'images en fondu enchainé.
    Le problème est que cela ne maarche que sur IE, pas sur FireFox ni Google Chrome.


    header :
    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
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    // mettre un minimum de 4 images !!! 
     
    var coef = 0.03 ; // avancement de l'opacité 
    var temps = 50 ; // temps entre chaque changement d'opacité 
    var temps_pause = 2500 ; // temps d'attente entre 2 changements d'images 
    var nombre_image = 6 ; // nombre d'images a faire bouger 
    var prefix_image = 'images/'; // chemin + prefix du nom des images 
    var suffix_image = '.gif' ; // suffix + '.extension' du nom des images 
     
    // pas touche 
    var indice = 2; // les 2 premiere image sont deja charger dans le HTML, on commence a la 3eme 
    var isIE = navigator.userAgent.toLowerCase().indexOf('msie')!=-1 ;
    var img1 = null; 
    var img2 = null ;
    var sens = 1; 
    var tabImg; // tab contenant les images 
     
    function prechargerImg(){ 
      tabImg = new Array(nombre_image); 
      for (i=0; i<=nombre_image -1; i++){ 
        tabImg[i]=new Image(); 
        tabImg[i].src = prefix_image+(i+1)+suffix_image; 
      } 
    } 
     
    function init() 
    { 
        img1 = document.getElementById("defilement1") ; 
        img2 = document.getElementById("defilement2") ; 
     
        prechargerImg(); 
        change_opacity(); 
    } 
     
    function change_opacity() 
    {     
        var opacity1 = 0 ; 
        var opacity2 = 0 ; 
        if (isIE) // for IE 
        {    opacity1 = parseFloat(img1.filters.alpha.opacity); 
            opacity2 = parseFloat(img2.filters.alpha.opacity); 
        } 
        else // for mozilla 
        {    opacity1 = parseFloat(img1.style.MozOpacity); 
            opacity2 = parseFloat(img2.style.MozOpacity); 
        } 
     
        if (sens) 
        {    if (isIE) // for IE 
            {    img1.filters.alpha.opacity = opacity1 + coef * 100; 
                img2.filters.alpha.opacity = opacity2 - coef * 100; 
            } 
            else // for Mozilla 
            {    img1.style.MozOpacity = opacity1 + coef; 
                img2.style.MozOpacity = opacity2 - coef; 
            } 
        } 
        else 
        { 
            if (isIE) // for IE 
            {    img1.filters.alpha.opacity = opacity1 - coef * 100; 
                img2.filters.alpha.opacity = opacity2 + coef * 100; 
            } 
            else // for Mozilla 
            {    img1.style.MozOpacity = opacity1 - coef; 
                img2.style.MozOpacity = opacity2 + coef; 
            } 
        } 
     
        if (isIE) // for IE 
        {    opacity1 = parseFloat(img1.filters.alpha.opacity); 
            opacity2 = parseFloat(img2.filters.alpha.opacity); 
        } 
        else // for mozilla 
        {    opacity1 = parseFloat(img1.style.MozOpacity); 
            opacity2 = parseFloat(img2.style.MozOpacity); 
        } 
     
        // on fait varié le sens d'opacité du bazar 
        if (opacity2 <= 0) 
        {    img2.src=tabImg[indice++].src; 
            sens = 0; 
            if (indice == (tabImg.length)) indice=0; 
            window.setTimeout("change_opacity()",temps_pause) ; // attente 
            return 0; 
        } 
        else if (opacity1 <= 0) 
        {    img1.src=tabImg[indice++].src; 
            sens = 1; 
            if (indice == (tabImg.length)) indice=0; 
            window.setTimeout("change_opacity()",temps_pause) ; // attente 
            return 0; 
        } 
        window.setTimeout("change_opacity()",temps) ; // recursion toutes les x millisec 
    }
    body :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <div id="rond_centrale_back">
    			<!-- Premiere image id=defilement1 -->
    		<img id="defilement1" src="images/1.gif" style="-moz-opacity:0;filter:alpha(opacity=0); position:absolute" border="0" />
    			<!-- Deuxieme image id=defilement2 /!\ positionnée RELATIVEMENT par rapport à la 1ère pour qu'elles se superposent /!\ -->
    		<img id="defilement2" src="images/2.gif" style="-moz-opacity:1;filter:alpha(opacity=100); position:absolute" border="0" />
    </div>

  2. #2
    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

    Mieux vaut utiliser jquery pour gérer l'opacité des images. Pour le script en lui même, il suffit de placer les deux images en position absolues, donc l'une par dessus l'autre, et d'augmenter l'opacité de la nouvelle image tout en diminuant celle de l'ancienne.

    Ça donne ça en gros :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    $('#previous-img').animate({
    	opacity: 0
    }, 600, function() {
    	$(this).remove();
    });
    $('#next-img').animate({
    	opacity: 1
    }, 600, function() {
    	$(this).attr('id', 'previous-img');
    });
    Il faut que next-img soit insérée avant en display none pour que cela fonctionne.

  3. #3
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Citation Envoyé par vrd-74
    Mieux vaut utiliser jquery pour gérer l'opacité des images.
    Pas d'accord

    Bien sûr, ton code est assez court et succinct, mais il faut prendre en compte ce qui est fait derrière au niveau du framework et en particulier le nombre de méthodes utilisées !
    En termes de performances, un framework rivalisera rarement avec un script spécifique à une action et intégrer jQuery (ou toute autre bibliothèque) juste pour ne pas avoir à gérer IE est selon moi une erreur de conception.
    Un framework quel qu'il soit ne doit pas être une rustine aux mauvaises connaissances du développeur en JavaScript, au contraire, il doit être une aide au développeur qui connait bien JavaScript et qui utilise le framework dans un projet global dans lequel JavaScript tient une place importante.

    Et puisqu'on parle de fondu, j'en profite pour signaler le script que j'avais fourni suite à une demande du même type : [SRC] Fondu enchainé
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  4. #4
    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
    Effectivement tout dépend du projet et de l'environnement de travail. Mais un framework bien exploité permet de gagner du temps, en particulier dans le cas de l'opacité ou il faut passer par les filtres pour IE, ce qui est pénible.
    Mais si jquery est utilisé juste pour cette fonction c'est certain que ça n'en vaut pas la peine.

  5. #5
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Tiens, un débat !
    Mais un framework bien exploité permet de gagner du temps
    Entièrement d'accord avec ça !
    Le hic étant bien sûr le "bien exploité"...
    D'expérience, je sais que JavaScript (comme du reste beaucoup de langages du Web) a cette particularité que beaucoup trouvent normal de l'utiliser sans l'apprendre. Et pour ça, jQuery est d'une aide excellente... sauf que du coup, il est mal exploité !
    A l'inverse, on se rend aussi compte comme tu le soulignes à juste titre de l'aide que peut apporter un framework pour ceux qui ont prit la peine d'apprendre JavaScript, notamment en terme de temps de développement !
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  6. #6
    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
    Entièrement d'accord, il est dommage de faire l'impasse sur l'utilisation "traditionnelle" de javascript. Mais pour avoir passé des années sans frameworks à faire les requêtes ajax "à l'ancienne", je bénis les développeurs de jquery !

  7. #7
    Membre éclairé Avatar de Aquellito
    Développeur informatique
    Inscrit en
    Juin 2008
    Messages
    337
    Détails du profil
    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Juin 2008
    Messages : 337
    Par défaut
    Bonjour à tous et merci pour vos réponses.

    Bon j'avou que je n'utilise pas JQuery alors je vais décortiquer ton code qui m'a l'air bien plus simle que le mien. Je vais essayer de l'adapter et je vous tiens au courant.

  8. #8
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 094
    Par défaut
    Citation Envoyé par vrd-74 Voir le message
    Entièrement d'accord, il est dommage de faire l'impasse sur l'utilisation "traditionnelle" de javascript. Mais pour avoir passé des années sans frameworks à faire les requêtes ajax "à l'ancienne", je bénis les développeurs de jquery !
    Héhé… Tant que tu ne connaîtras qu’un seul framework, tu ne seras pas objectif
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  9. #9
    Membre éclairé Avatar de Aquellito
    Développeur informatique
    Inscrit en
    Juin 2008
    Messages
    337
    Détails du profil
    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Juin 2008
    Messages : 337
    Par défaut
    Bon j'ai trouvé le problème...
    C'était le "MozOpacity" dans la fonction Javascript qui ne marche plus avec les nouvelles normes... Il faut désormais remplacer par "opacity".

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

Discussions similaires

  1. Compatibilité de script sous IE8
    Par fred19732 dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 09/05/2009, 01h45
  2. compatibilité de script avec firefox
    Par stefanelle dans le forum Général JavaScript
    Réponses: 9
    Dernier message: 06/05/2009, 11h48
  3. compatibilité de script avec IE
    Par ikramta dans le forum Général JavaScript
    Réponses: 17
    Dernier message: 24/04/2009, 17h43
  4. Compatibilité de script avec IE
    Par Khleo dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 10/04/2009, 07h49
  5. Compatibilité de script avec IE
    Par keyser94 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 25/06/2007, 16h15

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