document.createElement et le style
Bonjour,
J'ai un soucis avec mon document.createElement :
Code:
1
2
3
4
5
6
7
8
9
10
11
| function ajouterDetecteursDuPlan(){
for(var i = 0; i < nbDetecteur; i++){
var detecteur = document.createElement("img");
detecteur.setAttribute("src", "Immage/rondVert.png");
detecteur.setAttribute("id", detecteursDuPlan[i][0]);
detecteur.setAttribute("title", detecteursDuPlan[i][1]);
detecteur.setAttribute("onload", "dragDrop.initElement(this.id);");
detecteur.setAttribute("style", "left:" + detecteursDuPlan[i][2] + " px; top:" + detecteursDuPlan[i][3] + " px;");
document.getElementById("restePage").insertBefore(detecteur, document.getElementById("detecteurs"));
}
} |
Je récupère un tableau 2D qui contient des informations que je souhaite utiliser pour l'affichage d'un rondVert sur un plan.
Le code s’exécute correctement mais il ne me le place pas au coordonnée que je renseigne (top et left) et il n'active pas le drag&drop.
Ce qui est assez étrange c'est qu'avec fireBug quand je regarde le code de l'élément c'est que je vois bien les coordonnées que je lui est renseigné et quand je clic dessus le drag&drop s'active bien mais rien ne se passe.
Voici le code retourné par fireBug :
Code:
<img id="7" src="Immage/rondVert.png" title="Mon Detecteur" onload="dragDrop.initElement(this.id);" style="left:300 px; top:300 px;">
Et le rendu de la page :
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
| <html>
<head>
<title>Fire Scan</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="onload();">
<script type="text/JavaScript" language="javascript" src="ihmJS.js"></script>
<script type="text/JavaScript" language="javascript">
function getDetecteursDuPlan(){
var xhr = getXhr();
xhr.open("GET", "getListeDetecteursPlan.php?idPlan=1", false);
xhr.send(null);
return JSON.parse(xhr.responseText);
}
function onload(){
menuGaucheOnLoad();
/*if(document.getElementById('plan').width >= document.getElementById('plan').height)
document.getElementById('plan').width = screen.width - 205;
else
document.getElementById('plan').height = 960;*/
//Gestion du scroll
gestionScroll();
setDetecteursDuPlan(getDetecteursDuPlan());
getSizeOfDetecteursDuPlan();
ajouterDetecteursDuPlan();
}
</script>
<html>
<head>
<link rel="stylesheet" type="text/css" href="menuGaucheStyle.css">
<script type="text/JavaScript" language="javascript" src="menuJS.js"></script>
<script type="text/JavaScript" language="javascript" src="drag.js"></script>
<script type="text/JavaScript" language="javascript" src="json_parse.js"></script>
<script type="text/JavaScript" language="javascript">
</script>
</head>
<body>
<form name = "f1" action = "ihm.php">
<div class="menuGauche">
<table>
<tr><td><input type="button" value="Retour" id="retour" onclick="javascript:history.go(-1)"></td></tr>
</table>
<div id="log">
<table>
<tr><td>Loggin : <input type="textarea" name="log"></td></tr>
<tr><td>Password : <input type="password" name="pwd"></td></tr>
<tr><td><input type="button" value="Connexion" onclick="verifUser();"></td></tr>
</table>
</div>
<div id="connecter">
<table>
<tr><td><input type="button" value="Deconnexion" onclick="deconnexion();"></td></tr>
</table>
</div>
<table><tr><td><input type="button" value="Voir un plan" name="plan" onClick="newPopUp('http://127.0.0.1:8888/plan.php', 'coucou')"></td></tr></table>
<div id="listeDetecteur">
<table>
<tr><td><img id='0001' src='Immage/rondVert.png' onload='dragDrop.initElement(this.id);' style='position: absolute; z-index: 10;' title='Detecteur 1' />Detecteur 1</td></tr>
<tr><td><img id='0002' src='Immage/rondVert.png' onload='dragDrop.initElement(this.id);' style='position: absolute; z-index: 10;' title='Detecteur 2' />Detecteur 2</td></tr>
<tr><td><img id='0003' src='Immage/rondVert.png' onload='dragDrop.initElement(this.id);' style='position: absolute; z-index: 10;' title='Detecteur 3' />Detecteur 3</td></tr>
<tr><td><img id='0004' src='Immage/rondVert.png' onload='dragDrop.initElement(this.id);' style='position: absolute; z-index: 10;' title='Detecteur 4' />Detecteur 4</td></tr>
<tr><td><img id='0005' src='Immage/rondVert.png' onload='dragDrop.initElement(this.id);' style='position: absolute; z-index: 10;' title='Detecteur 5' />Detecteur 5</td></tr>
</table>
</div>
</div>
</form>
</body>
</html>
<div id='restePage'>
<img id='plan' src ='Immage/Mezzanine.png' alt='erreur' onload='dragDrop.initElement(this.id);'/>
<div id = 'detecteurs'>
</div>
</div> </body>
</html> |
Si quelqu'un peut me dire pourquoi cela ne marche pas ou me donner un autre moyen de faire ... Merci d'avance :ccool:
