createElement img ne s'affiche pas

Version imprimable

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:

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.

24/09/2009, 11h23
SpaceFrog

ton path n'est pas correct ...
10/12/2009, 01h10
Atow57
Bonjour,
Je suis actuellement dans le même problème, mon image ne s'affiche pas lorsque je fais:
Code:

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 ?
10/12/2009, 01h19
kernelfailure

Citation:

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).
10/12/2009, 01h46
Atow57

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...
10/12/2009, 09h14
vermine

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 ?

Déja en simplifiant le code :

Code:

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

10/12/2009, 11h35
kernelfailure
@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:

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.
10/12/2009, 11h53
SpaceFrog
personnellement je fais
Code:

1 2 3 var img = document.createElement('img'); ... img.src='path/image.jpg';
et ça fonctionne très bien

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

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

10/12/2009, 12h48
Bovino

Code:

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 :roll:

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

Code:

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:

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

10/12/2009, 15h10
Atow57
zone_text correspond à un fieldset
Code:

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...
11/12/2009, 07h48
vermine

:-?

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 ?
- ... ?
11/12/2009, 11h48
kernelfailure

A se demander si ça passe bien dans la fonction, ou si un retour à false ne viendrait pas troubler tout ça :?
11/12/2009, 12h21
E.Bzz

Bonjour,

Citation:

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+
11/12/2009, 12h50
Atow57

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 !
11/12/2009, 13h39
kernelfailure

Rafraichissement du cache :?
11/12/2009, 14h40
Atow57

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 !