Javascript : Affichage d'une image dans une div

Résolu
silver Messages postés 31 Date d'inscription mercredi 7 novembre 2001 Statut Membre Dernière intervention 2 avril 2016 - 8 janv. 2012 à 21:28
BunoCS Messages postés 15472 Date d'inscription lundi 11 juillet 2005 Statut Modérateur Dernière intervention 25 mars 2024 - 10 janv. 2012 à 14:51
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

BunoCS Messages postés 15472 Date d'inscription lundi 11 juillet 2005 Statut Modérateur Dernière intervention 25 mars 2024 103
9 janv. 2012 à 11:51
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...
3
silver Messages postés 31 Date d'inscription mercredi 7 novembre 2001 Statut Membre Dernière intervention 2 avril 2016
10 janv. 2012 à 11:30
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
0
BunoCS Messages postés 15472 Date d'inscription lundi 11 juillet 2005 Statut Modérateur Dernière intervention 25 mars 2024 103
10 janv. 2012 à 14:51
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...
0
Rejoignez-nous