createElement sous IE6 : membre introuvable

Version imprimable

Bonjour,

il s'agit donc de creer un element img avec un id (en absolute car il se deplacera en suivant la souris)

Donc IE6 me renvoi "membre introuvable" pour le code que voila (la ligne indiqué par IE est en rouge) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function preGlisse(e) { var imgglisse = document.createElement("img"); var srcimgglisse = document.createAttribute("src"); srcimgglisse.nodeValue = "data/images/"+acteur+"glisse.gif"; imgglisse.setAttributeNode(srcimgglisse); var idimgglisse = document.createAttribute("id"); var styleimgglisse = document.createAttribute("style"); idimgglisse.nodeValue = "imageglisse"; styleimgglisse.nodeValue = "position:absolute; left:"+theleft+"px; top:"+thetop+"px; width:42px; height:40px; -moz-opacity:0.5; opacity: 0.5; filter:alpha(opacity=50); z-index:10"; imgglisse.setAttributeNode(idimgglisse); imgglisse.setAttributeNode(styleimgglisse); document.getElementById("presentation").appendChild(imgglisse); if (ie) { document.body.onmousemove=null; document.body.onmousemove=Glisse; } if (ns6) { document.getElementsByTagName("body")[0].removeEventListener("mousemove",preGlisse, false); document.getElementsByTagName("body")[0].addEventListener("mousemove",Glisse, false); } }
Sachant que pour FF le code fonctionne sans probleme (distinction ie/ns6 est faite à l'aide de document.all, false ou true).

J'espere que vous pourrais m'aider , merci d'avance.:)

Salut,

Juste une proposition alternative pour écrire ton code.

CSS

Code:

1
2
3
4
5
6
 
.glisse {
	position: absolute; width: 42px; height: 40px;
	-moz-opacity:0.5; opacity: 0.5; filter:alpha(opacity=50); 
	z-index:10;
}

Javscript

Code:

1
2
3
4
5
6
7
8
 
	var imgglisse = document.createElement("IMG"); // en maj. si DOM en mode HTML
	imgglisse.setAttribute('src', "data/images/"+acteur+"glisse.gif");
	imgglisse.id = "imageglisse";
	imgglisse.className = "glisse";
	imgglisse.style.left = theleft + "px";
	imgglisse.style.top = thetop + "px";
	document.getElementById("presentation").appendChild(imgglisse);

23/02/2007, 20h21
Vanish

Dans une autre fonction je dois acceder au width et height de l'element creer alors au final c plus simple de definir le style de l'element comme je le fais, sinon pr le reste merci j'ignorais qu'on pouvait se passer du setAttributeNode.

Par contre personne ne voit de solution à mon probleme?
23/02/2007, 22h07
Gruik

L'element d'id "presentation" est créé quand et comment?

l'element presentation est déjà present dans le code html :

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>	
	<head>
		<title>Deplacement de fenetres</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<link rel="stylesheet" href="data/system/style.css" type="text/css">
		<script src="data/system/javascript.js" type="text/javascript"></script>		
	</head>
	
	<body onload="debut()">
	<div id="conteneur">
		<div id="presentation">

		<div id="banderole"><a href="index.php?page=accueil"><img src="data/images/banderole.jpg" alt="Eco-clic : la bouillote Ã©cologique !" /></a></div>


			<div id="affichage">
      
        <div name="produit" id="produit1" style="position:absolute; z-index:10; top:160px; left:0px; width:85px; height:69px;"><a href="index.php?page=produit1"><img src="data/images/produit1rubrique.jpg" alt="produit1" /></a></div>
        <div name="produit" id="produit2" style="position:absolute; z-index:10; top:160px; left:90px; width:85px; height:69px;"><a href="index.php?page=produit2"><img src="data/images/produit2rubrique.jpg" alt="produit2" /></a></div>
        <div name="produit" id="produit3" style="position:absolute; z-index:10; top:160px; left:180px; width:85px; height:69px;"><a href="index.php?page=produit3"><img src="data/images/produit3rubrique.jpg" alt="produit3" /></a></div>
        <div name="produit" id="produit4" style="position:absolute; z-index:10; top:160px; left:270px; width:85px; height:69px;"><a href="index.php?page=produit4"><img src="data/images/produit4rubrique.jpg" alt="produit4" /></a></div>
        <div name="produit" id="produit5" style="position:absolute; z-index:10; top:160px; left:360px; width:85px; height:69px;"><a href="index.php?page=produit5"><img src="data/images/produit5rubrique.jpg" alt="produit5" /></a></div>
        <div name="produit" id="produit6" style="position:absolute; z-index:10; top:160px; left:450px; width:85px; height:69px;"><a href="index.php?page=produit6"><img src="data/images/produit6rubrique.jpg" alt="produit6" /></a></div>
        <div name="produit" id="produit7" style="position:absolute; z-index:10; top:160px; left:540px; width:85px; height:69px;"><a href="index.php?page=produit7"><img src="data/images/produit7rubrique.jpg" alt="produit7" /></a></div>
         
 			  <form id="vider" name="vider" action="" style="position:absolute; top:460px; left:550px;">
				  <input type="submit" name="vide" value="" onclick="EffaceCookie('compteproduit')">
        </form>
			
				<?php 
					if( isset($_GET['page']) ) {
						if($_GET['page'] == 'produit1')
							include('data/include/produit1.html');
						elseif($_GET['page'] == 'accueil')
							include('data/include/accueileco.html');
						elseif($_GET['page'] == 'produit2')
							include('data/include/produit2.html');
						elseif($_GET['page'] == 'produit3')
							include('data/include/produit3.html');
						elseif($_GET['page'] == 'produit4')
							include('data/include/produit4.html');
						elseif($_GET['page'] == 'produit5')
							include('data/include/produit5.html');
						elseif($_GET['page'] == 'produit6')
							include('data/include/produit6.html');
						elseif($_GET['page'] == 'produit7')
							include('data/include/produit7.html');
					}else {
						include('data/include/accueileco.html');
					} 
				?>
				
  			<div id="caddie1" style="top:428px; left:17px; width:525px; height:110px; padding-left:90px;"><div id="titrecaddie1">faites glisser les articles hors du panier pour les supprimer</div><div id="conteneurcaddie1"></div></div>
			
      </div>

			<div id="aide"><img src="data/images/100prcteco.gif" alt="100% Ã©cologique !" /><div id="textaide">Les produits Ã©cologiques sont Ã©cologiques pour l'Ã©cologie !Les produits Ã©cologiques sont Ã©cologiques pour l'Ã©cologie !Les produits Ã©cologiques sont Ã©cologiques pour l'Ã©cologie !Les produits Ã©cologiques sont Ã©cologiques pour l'Ã©cologie !Les produits Ã©cologiques sont Ã©cologiques pour l'Ã©cologie !</div></div>

			<div id="passebas"><img id="fleches1" src="data/images/flechesbas.jpg" alt="direction commande" /><div id="nomzone1">Ma commande</div><img id="fleches2" src="data/images/flechesbas.jpg" alt="direction commande" /></div>
		
		</div>

		<div id="achat">

pr le reste du code a chaque fois que les styles sont dans une balise c pour être accessibles du JS.
A mon sens le probleme viendrait plutot de l'appelle de "imgglisse" mais je comprend pas prquoi :(

24/02/2007, 09h49
Gruik

Si preGlisse() est appelé dans data/system/javascript.js alors, à ce stade on a pas encore ecrit ce div id presentation de la page, donc getElementByID ne marcherait pas
Mais c'est peut etre autre chose

Au chargement de la page une fonction met en place les differents evenements qui apellent d'autres fonction, preglisse est appellé par un onmousemove mis en place dans une fonction qui est appele par un onmousedown.

Vala la aprtie du code concerné,

clicglisse est donc activé par un mousedown sur l'element concerné (un des div à l'id "produitX" dans le code html donc)

Code:

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
 
function clicglisse(e) {
	acteur=this.id;
	leftacteur = document.getElementById(acteur).style.left.slice(0, -2);
	leftacteur = leftacteur-0;
	topacteur = document.getElementById(acteur).style.top.slice(0, -2);
	topacteur= topacteur-0;
	if (ie) {
		theleft = event.offsetX+leftacteur-10;
		thetop = event.offsetY+topacteur-10;
		document.onselectstart=new Function ("return false");
		window.lastX=event.clientX;
		window.lastY=event.clientY;
		document.body.onmousemove=preGlisse;
		document.body.onmouseup=stopGlisse;
	}else if (ns6) {
		theleft = e.layerX+leftacteur-10;
		thetop = e.layerY+topacteur-10;
		document.onmousedown=disableselect;
            window.lastX=e.clientX;
            window.lastY=e.clientY;
            document.getElementsByTagName("body")[0].addEventListener("mousemove",preGlisse, false);
            document.getElementsByTagName("body")[0].addEventListener("mouseup",stopGlisse, false);
	}
}
 
function preGlisse(e) {
	var imgglisse = document.createElement("img");
	imgglisse.setAttribute('src', "data/images/"+acteur+"glisse.gif");
	imgglisse.id = "imageglisse";
	var styleimgglisse = document.createAttribute("style");
	styleimgglisse.nodeValue = "position:absolute; left:"+theleft+"px; top:"+thetop+"px; width:42px; height:40px; -moz-opacity:0.5; opacity: 0.5; filter:alpha(opacity=50); z-index:10";
	imgglisse.setAttributeNode(styleimgglisse);
	document.getElementById("presentation").appendChild(imgglisse);	
	if (ie) {
		document.body.onmousemove=null;
		document.body.onmousemove=Glisse;
	}
	if (ns6) {
		document.getElementsByTagName("body")[0].removeEventListener("mousemove",preGlisse, false);
		document.getElementsByTagName("body")[0].addEventListener("mousemove",Glisse, false);		
	}
}

Sinon donc ça fonctionne sans probleme sous FF donc je cherche du coter des bugs IE à ce niveau, sans succès pr l'instant.

24/02/2007, 12h13
Vanish
J'ai honte :oops:

Si j'avais vraiment testé la simplification du code qu'on m'avait proposé plus haut pour les styles de imgglisse, j'aurais tout de suite vu que c'est setAttributeNode qui fait bugguer IE6.

donc en faisant
Code:

1 2 3 4 imgglisse.style.left... imgglisse.style.top.... imgglisse.style.width...
ça fonctionne, même si c'est un peu fastidieux (bien entendu j'ai donc mis les valeurs auquelles je n'avais plus besoin d'acceder ensuite dans le style.css).

Sinon pourquoi IE bug sur du DOM niv.1 ... bin sans doute parce que c'est IE lol.