Salut à tous,

J'aimerais comprendre comment afficher une méthode qui affiche une image, et l'image est un attribut de notre classe.
Ici j''ai une classe Maison qui ressemble à ça :
class Maison{ constructor(uneAdresse, uneImage){ this.adresse = uneAdresse; this.image = uneImage; } setImage(uneImage){ this.image = uneImage; } getImage(){ return this.image; } afficheAdresse(){ alert('L\'adresse de la maison est: ${this.adresse}'); } afficheImage(){ //<u>et là je ne sais pas quoi mettre, je sais juste que je dois utiliser Document.Write.....</u> } }

Et j'aimerais avoir une méthode afficheImage() qui affiche l'image de la maison "maison.jpg" en utilisant le "Document.Write"

J'ai un tp à rendre pour samedi sur ça et c'est la première fois qu'il nous fait faire du JS et je suis tellement perdu

Merci de votre aide par avance

bah tu écris ta balise img dans le document.write

Je l'ai fait mais ca ne marche pas, rien ne s'affiche.

Et l'image on l'a deja puisqu'elle est dans la propriété de la classe Maison, donc on a pas besoin de mettre img src = xxx/xxx/photo.jpg si ?
Et comment retrouver son emplacement puisqu'on travaille ici avec un objet image ?

regarde ton énoncé

Je suis censé voir quoi ?

je fais pas de js pour le html, mais de ce que je sais, document.write ne fait qu'écrire du texte, non ?
si tu veux afficher une image te faut faire un truc du genre :

var img = document.createElement('img');
img.src = "chemin_de_mon_image.extension";
document.body.appendChild(img)

poste le

Le 07 avril 2021 à 19:29:38 bane54 a écrit :
poste le

j'ai deja tout dit, sinon j'ai ca comme aide en annexe :

(ici ca affiche bonjour mais meme principe pour les images d'apres le prof)

si tu veux l'énoncé complet je peux te le passer en mp, mais je t'assure que tout ce que j'ai dit dans mon topic suffit normalement pour la méthode afficher

Le 07 avril 2021 à 19:28:01 Shiba_the_Inu a écrit :
je fais pas de js pour le html, mais de ce que je sais, document.write ne fait qu'écrire du texte, non ?
si tu veux afficher une image te faut faire un truc du genre :

var img = document.createElement('img');
img.src = "chemin_de_mon_image.extension";
document.body.appendChild(img)

en fait on est censé afficher du texte (nom de la rue) quand on survole une image de la maison avec la souris

ba du coup par rapport à mon exemple tu rajoutes
img.onmouseenter = ta_fonction_write

Le 07 avril 2021 à 19:58:16 Shiba_the_Inu a écrit :
ba du coup par rapport à mon exemple tu rajoutes
img.onmouseenter = ta_fonction_write

Merci je teste ça tout à l'heure et j'indiquerai sur le topic si j'ai réussi

Le 07 avril 2021 à 19:28:01 Shiba_the_Inu a écrit :
je fais pas de js pour le html, mais de ce que je sais, document.write ne fait qu'écrire du texte, non ?
si tu veux afficher une image te faut faire un truc du genre :

var img = document.createElement('img');
img.src = "chemin_de_mon_image.extension";
document.body.appendChild(img)

En fait le problème c'est qu'ici je ne suis pas censé connaitre le chemin de l'image
Quand j'instancie ma classe Maison, j'ai une adresse, et une image, mais je connais pas son emplacement car j'ai plusieurs images de maisons

Le 07 avril 2021 à 20:17:17 Seiyajvc a écrit :

Le 07 avril 2021 à 19:28:01 Shiba_the_Inu a écrit :
je fais pas de js pour le html, mais de ce que je sais, document.write ne fait qu'écrire du texte, non ?
si tu veux afficher une image te faut faire un truc du genre :

var img = document.createElement('img');
img.src = "chemin_de_mon_image.extension";
document.body.appendChild(img)

En fait le problème c'est qu'ici je ne suis pas censé connaitre le chemin de l'image
Quand j'instancie ma classe Maison, j'ai une adresse, et une image, mais je connais pas son emplacement car j'ai plusieurs images de maisons

je comprends pas quel est ton problème?? tu as les images

Le 07 avril 2021 à 20:25:40 bane54 a écrit :

Le 07 avril 2021 à 20:17:17 Seiyajvc a écrit :

Le 07 avril 2021 à 19:28:01 Shiba_the_Inu a écrit :
je fais pas de js pour le html, mais de ce que je sais, document.write ne fait qu'écrire du texte, non ?
si tu veux afficher une image te faut faire un truc du genre :

var img = document.createElement('img');
img.src = "chemin_de_mon_image.extension";
document.body.appendChild(img)

En fait le problème c'est qu'ici je ne suis pas censé connaitre le chemin de l'image
Quand j'instancie ma classe Maison, j'ai une adresse, et une image, mais je connais pas son emplacement car j'ai plusieurs images de maisons

je comprends pas quel est ton problème?? tu as les images

j'appelle mon constructeur pour faire une maison : en parametre je donne une rue et une image, mais en mettant l'image je ne donne pas son emplacement ???

document.write("<img name=image src="+chemin+this.image">");

ou alors tu met le chemin avec le nom dans image

Le 07 avril 2021 à 20:34:24 bane54 a écrit :
document.write("<img name=image src="+chemin+this.image">");
ou alors tu met le chemin avec le nom dans image

ok par contre il sert à quoi le "+this.image" ?

Le 07 avril 2021 à 20:44:44 Seiyajvc a écrit :

Le 07 avril 2021 à 20:34:24 bane54 a écrit :
document.write("<img name=image src="+chemin+this.image">");
ou alors tu met le chemin avec le nom dans image

ok par contre il sert à quoi le "+this.image" ?

c'et ne nom de l'image ex: image.png
ou tu peux mettre directement "chemin/vers/image.png" dans this.image
tu comprends

[20:34:24] <bane54>
document.write("<img name=image src="+chemin+this.image">");
ou alors tu met le chemin avec le nom dans image

C'est pas une bonne pratique d'injecter du code sous forme d'une chaîne de caractères (hormis si c'est fait côté serveur).

Côté client:
const image = document.createElement('image')
// Tu peux mettre this.image à la place de l'URL que j'ai mise ici
image.src = 'https://foo.bar/baz.pbg'
image.alt = 'description' // pour les screen reader
// Ton container doit être un élément de ton document
// Comme document.body ou n'importe quelle élément que tu récupère
// Avec un sélecteur, ex: const container = document.querySelector('#mon-container')
container.appendChild(image)