Afficher image à la place de l'url
Résolu
Sidandrain
-
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour,
J'essai de faire en sorte qu'un pop up apparaissent avec les données de mon API lorsque je clique à un endroit précis.
Mon problème c'est que la pop up apparait mais c'est l'url qui est affiché dans le pop up et non l'image, de plus, c'est toujours le même URL qui s'affiche alors qu'il devrait y avoir 9 photos.
Une idée ?
J'essai de faire en sorte qu'un pop up apparaissent avec les données de mon API lorsque je clique à un endroit précis.
Mon problème c'est que la pop up apparait mais c'est l'url qui est affiché dans le pop up et non l'image, de plus, c'est toujours le même URL qui s'affiche alors qu'il devrait y avoir 9 photos.
Une idée ?
function afficherPortrait(id){ let popup = document.getElementById("popup"); let content = document.getElementById("content"); let span = document.getElementsByClassName("close")[0]; popup.style.display = "block"; let paragraph = document.createElement('p'); const title = document.createTextNode('Portrait : '); paragraph.appendChild(title); content.insertAdjacentElement('beforeend', paragraph, content); const sautLigne = document.createElement('br'); paragraph.appendChild(sautLigne); content.insertAdjacentElement('beforeend', paragraph, content); const req = new XMLHttpRequest(); req.open('GET', 'http://localhost/Fil_Rouge/api.php?portrait_id=' + id, true); req.onreadystatechange = ()=>{ if(req.readyState === 4 && req.status === 200){ const data = JSON.parse(req.responseText); paragraph; if(Object.keys(data).length !== 0){ const state = document.createTextNode(data[0].portrait_url); paragraph.appendChild(state); content.insertAdjacentElement('beforeend', paragraph, content ); } else{ const noValueState = document.createTextNode("Non renseigné"); paragraph.appendChild(noValueState); content.insertAdjacentElement('beforeend', paragraph, content); } } }; req.send(); // When user clicks on span, close the modal span.onclick = ()=>{ popup.style.display = "none"; content.innerHTML=''; } // When the user clicks outside the modal, close it window.onclick = (event)=>{ if(event.target == popup){ popup.style.display = "none" content.innerHTML=''; } } }
EDIT : Correction des balises de code : Ajout du LANGAGE pour avoir la coloration syntaxique
A voir également:
- Afficher image à la place de l'url
- Url - Guide
- In da place - Forum Mail
- Dans la présentation à télécharger, déplacez l'image dans le cadre sans en modifier la taille. redressez l'image pour que le niveau de la mer soit à l'horizontale. faites correspondre : la ligne avec le niveau de la mer ; le point avec le sommet de la grande voile. combien d'oiseaux sont dans le cadre ? - Forum Word
- Frédéric cherche à faire le buzz sur les réseaux sociaux. il a ajouté une image de manchots sur une image de plage. retrouvez l'image originale de la plage. que cachent les manchots ? ✓ - Forum Windows
- Meilleur place accor arena ✓ - Forum Loisirs / Divertissements
1 réponse
Bonjour,
Une image .. ça se visualise grace à une balise html <img
Donc, c'est dans le traitement de ton retour ajax que tu dois créer/gérer les différents contenus...
PS: le mot "const" sert à déclarer des CONSTANTES ... et les constantes.. ça doit être.. constant...
A la place, prend l'habitude d'utiliser les mots clés VAR ou LET pour déclarer tes variables...
PS²: Lorsque tu postes du code sur le forum, tu dois préciser le LANGAGE dans les balises de code.
Explications ( à lire entièrement !! ) disponibles ici :
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
Une image .. ça se visualise grace à une balise html <img
Donc, c'est dans le traitement de ton retour ajax que tu dois créer/gérer les différents contenus...
PS: le mot "const" sert à déclarer des CONSTANTES ... et les constantes.. ça doit être.. constant...
A la place, prend l'habitude d'utiliser les mots clés VAR ou LET pour déclarer tes variables...
PS²: Lorsque tu postes du code sur le forum, tu dois préciser le LANGAGE dans les balises de code.
Explications ( à lire entièrement !! ) disponibles ici :
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
Lorsqu'une question est résolue ... on ne la supprime pas....
Elle pourrait servir à d'autres internautes ayant le même genre de question que toi...