Javascript : Affichage d'une image dans une div [Résolu]

Signaler
Messages postés
28
Date d'inscription
mercredi 7 novembre 2001
Statut
Membre
Dernière intervention
2 avril 2016
-
Messages postés
14749
Date d'inscription
lundi 11 juillet 2005
Statut
Modérateur
Dernière intervention
10 juillet 2020
-
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 :
        <li>Silver :Bienvenue sur le Chat</li> 


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

3 réponses

Messages postés
14749
Date d'inscription
lundi 11 juillet 2005
Statut
Modérateur
Dernière intervention
10 juillet 2020
92
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...
Messages postés
28
Date d'inscription
mercredi 7 novembre 2001
Statut
Membre
Dernière intervention
2 avril 2016

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
Messages postés
14749
Date d'inscription
lundi 11 juillet 2005
Statut
Modérateur
Dernière intervention
10 juillet 2020
92
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...