Javascript : Affichage d'une image dans une divRésolu

Question

Bonjour, Le bout de code javascript suivant est issu d'un script utilisé pour un chat instantané. Actuellement, le chat affiche en instantané le nom de l'utilisateur, son message et la date du message. J'aimerais également ajouter l'avatar de l'utilisateur du chat, mais je n'arrive pas à insérer d'image dans la div. A chaque fois que j'ai essayé quelque chose, j'obtenais le code de l'image et non l'image réel, tel que ci dessous : Silver a ecrit le 2012-01-08 a 15:03:02 : Salut. Dans le fichier script.js : //inserts the new content into the page function insertNewContent(liName,liText,liTime1,liTime2,liAvatar) { insertO = document.getElementById("outputList"); oLi = document.createElement('li'); oSpan = document.createElement('span'); oSpan.setAttribute('className','name'); //for IE's sake oSpan.setAttribute('class','name'); oName = document.createTextNode(liName+' a ecrit le '+liTime1+' a '+liTime2+' :'); oText = document.createTextNode(liText); oSpan.appendChild(oName); oLi.appendChild(oSpan); oLi.appendChild(oText); insertO.insertBefore(oLi, insertO.firstChild); } Dans le fichier chat.php :

Silver :Bienvenue sur le Chat

En vous remerciant d'avance si vous avez une solution.

BunoCS · Accepted Answer

Hello,
Comment t'y es-tu pris?
J'ai fait un petit test, ceci devrait te convenir:

function addImage() {
insertO = document.getElementById("mydiv");
oImg = document.createElement('img');
oImg.setAttribute('src','http://www.javascriptfr.com/g/logos/normal/logojs.png');
insertO.insertBefore(oImg, insertO.firstChild);
}



@+
Buno, Admin CS
L'urgent est fait, l'impossible est en cours. Pour les miracles, prévoir un délai...

silver · Answer

Super ! Merci beaucoup, c'est ce qu'il me fallait !

En effet, j'avais essayé des choses similaires à ta solution mais j'avais mal spécifié la fonction setAttribute, et je n'étais pas sûr de devoir inséré un nouvel 'insertBefore' pour l'image. Sinon, j'avais aussi tenté innerHTML, mais il semblerait que ça ne fonctionne qu'avec du texte pur.

Je vais testé ça ce soir, mais j'imagine que pour changer la taille de l'image, il suffit de faire :

oImg.setAttribute('width', "25");
oImg.setAttribute('height', "25");

Si je veux rajouter un effet d'ombrage à l'image, sais tu si c'est possible avec le javascript, ou dois-je obligatoirement passer par le css?

Encore merci pour ta solution ;)

Silver

BunoCS · Answer

Avec CSS, c'est possible. En javascript, c'est sûrement possible aussi mais je ne l'ai jamais mis en pratique...


@+
Buno, Admin CS
L'urgent est fait, l'impossible est en cours. Pour les miracles, prévoir un délai...

Javascript : Affichage d'une image dans une div

3 réponses

Votre réponse