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 :

Attributs inexistants sur IE


Sujet :

JavaScript

  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Mars 2010
    Messages
    82
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2010
    Messages : 82
    Par défaut Attributs inexistants sur IE
    Bonjour,

    Je suis en train de développer un petit lecteur d'images en pur Javascript, et je voudrais que vous m'aidiez sur un bug dont j'ignore totalement l'origine.

    Lorsque je clique sur une image miniature,l'image originale doit apparaître avec des attributs comme src ou className. Sous Firefox et le reste ça marche, mais pas sous IE : il me fait apparaître les images mais avec aucun attribut. Dans le DOM j'ai que des <img /> vides.

    Voici le code de mon API :
    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
    window.onload = init;
     
    /* Fonction qui gère la compatibilité des événements */
    function declencheur(cible, condition, effet) {
       if (cible.addEventListener) cible.addEventListener(condition, effet, false);
       else if (cible.attachEvent) cible.attachEvent("on" + condition, effet);
    }
     
    /*
     - Recherche de toutes les images dans la div #simpleBox
     - Création d'une boucle pour afficher ces images
     - Création d'un événement "click" qui appel la fonction boxCFG
     */
    function init() {
    	cibleDiv = document.getElementById("simpleBox");
    	cibleImg = cibleDiv.getElementsByTagName("img");
     
    	for (var i = 0; i < cibleImg.length; i++) {
    		declencheur(cibleImg[i], 'click', boxCFG);
    	}
    }
     
    /* Fonction pour centrer les élements */
    function middlePos(elem) {
    	parseInt(elem.style.marginLeft = "-" + (elem.width / 2) + "px");
    	parseInt(elem.style.marginTop = "-" + (elem.height / 2) + "px");
    }
     
    /*
     - Création d'une balise "img", introduction de cette balise dans la div #simpleBox
     - L'attribut SRC de l'image sur laquelle on clique (actualImg) est modifié, on change son chemin en remplacent "small" par "original" (noms des dossiers),
       cela permettra d'afficher l'image en taille réelle.
     - Positionnement de l'image au centre de la fenêtre
     */
    function boxCFG() {
    	// Création de l'image
        imgTag = document.createElement("img");
    	cibleDiv.appendChild(imgTag);
     
    	// Changement de l'URL
    	actualImg = this.src;
    	origToBigImg = actualImg.replace("small", "original");
    	imgTag.src = origToBigImg;
     
    	// Faire disparaître l'image le temps du chargement
        imgTag.className = "originalImg_notLoaded";
     
    	// Afficher un icône Loader le temps du chargement
    	imgLoader = document.createElement("img");
    	cibleDiv.appendChild(imgLoader);
    	imgLoader.src = "./img/img-simpleBOX/loader.gif";
    	imgLoader.className = "hideImgLoader";
    	imgLoader.onload = function() {
    		imgLoader.className = "imgLoader";
    		middlePos(imgLoader);
    	}
     
    	// Executer la fonction une fois les images chargées
    	imgTag.onload = function() {
    		cibleDiv.removeChild(imgLoader);
    		imgTag.className = "originalImg_LoadComplete";
    		middlePos(imgTag);
    	}
    }
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <div id="simpleBox">
    	<img src="img/img-simpleBOX/small/desert.jpg" width="200" height="200" alt="Désert" /> 
    	<img src="img/img-simpleBOX/small/meduse.jpg" width="200" height="200" alt="Méduse" />
    	<img src="img/img-simpleBOX/small/koala.jpg" width="200" height="200" alt="Koala" />
    	<img src="img/img-simpleBOX/small/fleur.jpg" width="200" height="200" alt="Fleur" />
    </div>
    Bizarre, car quand je crée une image en dehors de toutes fonctions/évènement et lui donne des attributs, là ça marche.

    Merci.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    Bonjour,
    il y a beaucoup à dire sur le code et notamment la non utilisation du mot clé var, qui outre le fait qu'elle limite la portée des variables, aide fortement les personnes qui doivent analyser un code pour le déboguer et leur permet d'un rapide coup d'oeil de savoir d'où vient celle ci.

    En second il est surprenant de voir une ligne tel que
    suivi immédiatement d'une fonction qui /* Fonction qui gère la compatibilité des événements */ sans même l'utiliser pour ajouter un événement sur le onload de window.
    Il semble qu'un
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    declencheur( window, 'load', init);
    aurait été plus élégant.

    Venons en à ton problème...

    IExplorer gère un event global alors que FireFox et d'autres gère un event pour chaque objet.
    Tout ceci pour dire que ton problème vient de là.

    Tentative d'explication claire...
    - Lorsque tu ajoutes un événement à un objet, et qu'il se produit, FireFox sait que c'est l'objet lui même qui l'a déclenché puisque c'est comme cela qu'il les gère et l'appel à this dans la fonction ne lui pose pas de problème de reconnaissance.
    - IExplorer lui sait que l'événement à été déclenché mais l'appel à this reste dans le contexte global et donc s'applique à window.

    Il est plusieurs solutions à ton problème
    la première mettre directement sur le onclick des images l'appel à ta fonction
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    function init() {
      cibleDiv = document.getElementById("simpleBox"); // on presume qu'elle est globale
      var cibleImg = cibleDiv.getElementsByTagName("IMG");
     
      for (var i = 0; i < cibleImg.length; i++) {
        cibleImg[i].onclick = boxCFG; // en direct live
      }
    }
    une seconde en passant par ta fonction declencheur mais en passant en paramètre à la fonction l'objet
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function init() {
      cibleDiv = document.getElementById("simpleBox");
      var cibleImg = cibleDiv.getElementsByTagName("IMG");
     
      for (var i = 0; i < cibleImg.length; i++) {
        var oImg = cibleImg[i];
        declencheur( oImg, 'click', function () { boxCFG(oImg)});
      }
    }
    il faut penser à modifier la fonction boxCFG pour permettre l'utilisation de l'objet

    si tu tiens à utiliser cette syntaxe
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    function init() {
      cibleDiv = document.getElementById("simpleBox");
      var cibleImg = cibleDiv.getElementsByTagName("IMG");
     
      for (var i = 0; i < cibleImg.length; i++) {
        declencheur( cibleImg[i], 'click', boxCFG);
      }
    }
    alors il te faut glisser dans la fonction boxCFG
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    function boxCFG( e) { // on note le parametre e pour les NON IE
      e = e||event;
      var oImg = e.target||event.srcElement;
    et d'utiliser oImg à la place de this.

    j'en passe et des pas forcément meilleur.

    Pas sûr que cela soit bien compréhensible...

  3. #3
    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 NoSmoking Voir le message
    Pas sûr que cela soit bien compréhensible...
    C'est plutôt la compréhension de l'ensemble qui est ardue quand on découvre. ^^

    Moi, je trouve tes explications utiles et détaillées

    (par contre, je te le dis, le prends pas mal, hein ^^ mais à chaque fois que je consulte un thread auquel tu as participé, va savoir pourquoi, je me sens toujours un peu interdit de séjour *tiens où est mon briquet* )

    Autre chose, 3 petites remarques pour chok371 cette fois ^^

    1) comme paramètre de createElement, utilise plutot les noms canoniques des balises (donc en MAJ)

    2)
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <img src="img/img-simpleBOX/small/desert.jpg" width="200" height="200" alt="Désert" />
    200 patates de long sur 200 carottes de large, c'est bien ça ?

    3) qu'est-ce que c'est que ... () ça :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    /* Fonction pour centrer les élements */
    function middlePos(elem) {
    	parseInt(elem.style.marginLeft = "-" + (elem.width / 2) + "px");
    	parseInt(elem.style.marginTop = "-" + (elem.height / 2) + "px");
    }
    (déjà, un parseInt, on le place dans un try/catch car ça peut lever une exception, ensuite, il manque le deuxième paramètre, ET SURTOUT ...si c'est pour ne pas récupérer le résultat... pourquoi ? mais pourquoi ? )

  4. #4
    Membre confirmé
    Profil pro
    Inscrit en
    Mars 2010
    Messages
    82
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2010
    Messages : 82
    Par défaut
    Merci NoSmoking !

    Pour romain, les messages en forme de blague et moquerie de ce genre je m'en passerais bien la prochaine fois, merci d'avance !

    Je répondrais même pas car j'ai de toute façon rien capté...

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    Citation Envoyé par chok371
    Pour romain, les messages en forme de blague et moquerie de ce genre je m'en passerais bien la prochaine fois, merci d'avance !
    Je répondrais même pas...
    ne le prend pas mal, sous le ton de la boutade il révèle des lacunes dans ton code, je reprendrais quand même celle ci
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    /* Fonction pour centrer les élements */
    function middlePos(elem) {
      parseInt(elem.style.marginLeft = "-" + (elem.width / 2) + "px");
      parseInt(elem.style.marginTop = "-" + (elem.height / 2) + "px");
    }
    si elem.width vaut 127 tu mettras dans marginLeft -63.5 et non 63 comme tu laisses à penser, autant donc écrire...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    /* Fonction pour centrer les élements */
    function middlePos(elem) {
      elem.style.marginLeft = "-" + parseInt(elem.width/2, 10) + "px");
      elem.style.marginTop = "-" + parseInt(elem.height/2, 10) + "px");
    }

  6. #6
    Membre confirmé
    Profil pro
    Inscrit en
    Mars 2010
    Messages
    82
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2010
    Messages : 82
    Par défaut
    Encore merci !

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

Discussions similaires

  1. Site inexistant sur IE7
    Par hlcginfo dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 04/03/2008, 02h47
  2. Réponses: 2
    Dernier message: 20/12/2007, 11h39
  3. Réponses: 2
    Dernier message: 11/10/2006, 11h21
  4. attribut référence sur un vector
    Par youhil dans le forum SL & STL
    Réponses: 2
    Dernier message: 28/05/2006, 20h27
  5. [CR 8.5] Attribution couleur sur un graphique
    Par Silvinho42 dans le forum SAP Crystal Reports
    Réponses: 4
    Dernier message: 30/06/2005, 15h00

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