Discussion :

[chok371]

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.

[NoSmoking]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

window.onload = init;

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

[RomainVALERI]

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 ? )

[chok371]

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é...

[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...

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");
}

[chok371]

Encore merci !