createElement img ne s'affiche pas

**pasqual** · 24/09/2009, 11h17

Bonjour,

J'ai un petit soucis pour afficher une image avec createElement: Je souhait afficher un gif avec du texte à côté en overlay d'une page.
Voici ce que j'ai fais:

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
var mydiv = currentDoc.createElementNS("http://www.w3.org/1999/xhtml","html:div");
newdiv.id="overlay";
newdiv.style.setProperty('position', 'absolute', 'important');
newdiv.style.setProperty('background-color', '#000000', 'important');
newdiv.style.setProperty('color', '#ffffff', 'important');
newdiv.style.setProperty('width', '200px', 'important');
newdiv.style.setProperty('height', '200px', 'important');
newdiv.style.setProperty('opacity', '0.5', 'important');
newdiv.style.setProperty('z-index', '1000', 'important');
var monimg=currentDoc.createElement('img' );
monimg.src="chrome://monApp/skin/monimage.gif";
newdiv.appendChild(monimg);
var txt = currentDoc.createTextNode("Mon message....");
newdiv.appendChild(txt);
currentDoc.body.appendChild(newdiv);

Je visualise bien le texte en overlay mais pas l'image. Je ne crois pas mettre tromper dans le chemin de l'image.

Merci d'avance si vous pouvez m'aider.

**SpaceFrog** · 24/09/2009, 11h23

ton path n'est pas correct ...

**Atow57** · 10/12/2009, 01h10

Bonjour,
Je suis actuellement dans le même problème, mon image ne s'affiche pas lorsque je fais:

Code :

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

1
2
3
4
var img_del = document.createElement("img");
img_del.src = "images/delete.png";
 
lien.appendChild(img_del);

Je veux bien croire que le chemin d'accès de Pasqual n'est pas correcte mais que je l'écrive en relatif ou en absolu cela ne fonctionne pas non plus...

Tu peux être plus précis SpaceFrog stp ?

**kernelfailure** · 10/12/2009, 01h19

Envoyé par Atow57

...
Je veux bien croire que le chemin d'accès de Pasqual n'est pas correcte mais que je l'écrive en relatif ou en absolu cela ne fonctionne pas non plus...

Tu peux être plus précis SpaceFrog stp ?

Simple à vérifier.
Dans ta barre URL "http://.../.../tapage.html", tu remplaces "tapage.html" par "images/delete.png", et tu verra si ton adresse est bonne et si ton image est bien là (attention à la casse).

**Atow57** · 10/12/2009, 01h46

oui oui, l'image est bien à l'endroit où elle est sensé être...
Je débute en JS alors je pensais m'être trompé dans la syntaxe mais après avoir regardé sur plusieurs articles, c'est bien de cette manière que l'on créé une image...
je ne comprend pas...

**vermine** · 10/12/2009, 09h14

Bonjour,

Je maintiens et nous en parlons depuis une semaine ici que les images ne s'attachent pas n'importe où dans un document. Je ne connais pas la liste exact des éléments pères mais je sais que sur un <td> ça fonctionne.

Atow57, vous attachez l'image à "lien". Qu'est-ce que c'est ? Un <a> ? Et lui même, vous l'attachez à qqch ?

**SpaceFrog** · 10/12/2009, 09h33

Déja en simplifiant le code :

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
var mydiv = currentDoc.createElement("div");
newdiv.id="overlay";
newdiv.style.position="absolute";
newdiv.style.backgroundColor="#000000";
newdiv.style.color="#ffffff";
newdiv.style.width="200px";
newdiv.style.height="'200px";
newdiv.style.opacity="0.5"; // pas cross-browser!
newdiv.style.zIndex="1000";
 
var monimg=document.createElement('img' );
monimg.src="chrome://monApp/skin/monimage.gif";
newdiv.appendChild(monimg);
var txt = document.createTextNode("Mon message....");
newdiv.appendChild(txt);
currentDoc.body.appendChild(newdiv);

**kernelfailure** · 10/12/2009, 11h35

@pasqual
Pourquoi on passe de "mydiv" à "newdiv" ?

@Atow57
Comme vermine je serais curieux de connaitre "lien"

Pour créer une image, je fais ceci qui fonctionne très bien :

Code :

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

1
2
3
4
var img = document.createElement('img');
...
img.setAttributeNode(document.createAttribute('src'));
img.setAttribute('src', src);

Ensuite, bien sur, j'appendChild à un element. La seule différence, c'est que je passe par les méthodes. Je serais surpris que ça solutionne le problème en fait.
En tout cas, il n'y a pas de raison que ça ne puisse fonctionner.

**SpaceFrog** · 10/12/2009, 11h53

personnellement je fais

Code :

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

1
2
3
var img = document.createElement('img');
...
img.src='path/image.jpg';

et ça fonctionne très bien

**Atow57** · 10/12/2009, 12h36

voila le reste du code, je ne pense pas avoir fait d'erreur pourtant...

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
var text_fieldset = document.getElementById("zone_text");
 
//<img src="images/delete.png"/>
var img_del = document.createElement("img");
img_del.src = "images/delete.png";
 
//<a href="#" class="supprimer"><img src="images/delete.png"/></a>	
var lien_del = document.createElement("a");
lien_del.setAttribute("class","supprimer");
lien_del.setAttribute("className","supprimer");
lien_del.setAttribute("href","#");
lien_del.appendChild(img_del);
 
if(document.all) lien_del.attachEvent("onclick",del);
else lien_del.addEventListener("click",del,true);
 
 
//<p class="ligne"> ***tous les éléments créés ci-dessus*** </p>
var ligne = document.createElement("p");
ligne.setAttribute("class","ligne");
ligne.setAttribute("className","ligne");
ligne.appendChild(lien_del);
 
//rattaché au fieldset de mon fichier xhtml
text_fieldset.appendChild(ligne);

**Bovino** · 10/12/2009, 12h48

Code :

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

var text_fieldset = document.getElementById("zone_text");

Ca me fait un peu peur ça...
zone_text, ça correspond à quoi comme élément HTML ?
J'espère que c'est pas un input ou un textarea

**vermine** · 10/12/2009, 13h25

Je remarque un truc étrange avec ce petit code test:

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
 
<div id="ouille"></div>
 
<script>
var text_fieldset = document.getElementById("ouille");
 
var img_del = document.createElement("img");
img_del.src = "ElleTombeDuDosDeSesDanseurs.jpg";
 
var lien_del = document.createElement("a");
lien_del.setAttribute("class","supprimer");
lien_del.setAttribute("className","supprimer");
lien_del.setAttribute("href","#");
lien_del.appendChild(img_del);
 
var ligne = document.createElement("p");
ligne.setAttribute("class","ligne");
ligne.setAttribute("className","ligne");
ligne.appendChild(lien_del);
 
text_fieldset.appendChild(ligne);
</script>

Si je ne mets rien dans le div, la photo ne s'affiche pas. Si je mets un espace, elle ne s'affiche tjs pas. Mais dès que je mets une lettre (ou plusieurs), la photo s'affiche:

Code :

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

1
2
 
<div id="ouille">Elle tombe!</div>

**Atow57** · 10/12/2009, 15h10

zone_text correspond à un fieldset

Code :

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

1
2
3
4
5
 
<FIELDSET id="zone_text">
     <LEGEND>Ajouter vos personnages</LEGEND>
     <p class="plink" onClick="add()"> Ajouter </p>
</FIELDSET>

la fonction add() en javascript appel le code que j'ai citer au post précédent mais avec des éléments en plus du genre <INPUT type="texte"> etc...

mais je ne pense pas que le problème vienne du fieldset...

**vermine** · 11/12/2009, 07h48

Si on remplace le div ouille du code que j'ai mis plus haut par votre fieldset zone_text, la photo apparait bien chez moi.

- Chemin de l'image incorrect ?
- Autre élément dans le fichier Javascript qui perturbe le bazarre ?
- Plusieurs élément avec le même id dans la page ?
- ... ?

**kernelfailure** · 11/12/2009, 11h48

A se demander si ça passe bien dans la fonction, ou si un retour à false ne viendrait pas troubler tout ça

**E.Bzz** · 11/12/2009, 12h21

Bonjour,

Envoyé par kernelfailure

A se demander si ça passe bien dans la fonction, ou si un retour à false ne viendrait pas troubler tout ça

voire une erreur dans le code qui précède, lors de l'exécution ...

Si la "notification des erreurs de scripts" n'est pas activée ...

A+

**Atow57** · 11/12/2009, 12h50

Bonjour,
Et bien... je dois vous avouer que je ne comprend rien...
Hier (enfin tôt ce matin) j'éteins le pc ca ne marchait toujours pas...
Ce matin en cours d'info, je veux le montrer à un collègue pour qu'il regarde si il ne voit pas un bug quelque part et ... PAF ! ca marche ! l'image s'affiche correctement !

J'ai pas compris pourquoi ça a fonctionné subitement sans rien changer mais ça marche !
donc merci beaucoup pour votre aide !

A bientôt pour de nouvelles aventures !

**kernelfailure** · 11/12/2009, 13h39

Rafraichissement du cache

**Atow57** · 11/12/2009, 14h40

je rafraichis toujours le cache en même temps que j'actualise ma page avec ctrl+f5...

C'est bizarre...

Ah ... les mystères de l'informatique !

createElement img ne s'affiche pas

JavaScript

Discussions similaires

Partager

Partager