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); } }Bizarre, car quand je crée une image en dehors de toutes fonctions/évènement et lui donne des attributs, là ça marche.
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>
Merci.
Partager