Insertion d'une image dans une liste déroulante

Par juan.3594, il y a 1 an

Les bases HTML/CSS

Bonjour à tous

J'avais une question à vous poser. Est ce que c'est possible d'insérer une image src dans une liste déroulante. Si c'est le cas j'aimerais savoir comment l'implémenter. Je vous pose la question car sur une consigne je souhaite sélectionné une liste d'amis avec statut confirmé confirmé et insérer une image en png. J'avais essayé ceci

<div class="container mt-5"> <div class="row"> <div class="col-md-8 offset-md-2"> <div class="card"> <div class="card-body"> <h5 class="card-title">Liste des Amis Confirmés</h5> <select id="confirmedFriendsList" class="form-select"> <option value="">Sélectionner un ami</option> </select> <button id="recommendFriendBtn" class="btn btn-primary mt-3">Recommander cet ami</button> <!-- Zone pour afficher l'image de l'ami sélectionné --> <div id="selectedFriendImage" class="mt-3"> <img id="friendImage" src="assets/Jose.png" alt="Photo de l'ami sélectionné" style="display: none;"> </div> </div> </div> </div> </div> </div>

Sauf que dans le navigateur l'image en png n'apparait pas quand je clique dans "selectionné un ami". Pouvez vous m'aider SVP? Merci à vous.

3 réponses

juan.3594, il y a 1 an

Bonjour Gonzyui

Ma question est simple : Est ce que pour cette partie il y aurait une possibilité d'insérer une image src dans une liste déroulante?

Erkstone, il y a 1 an

Tu veux insérer l'image dans la liste ou à côté ?

Si tu veux insérer l'image dans la liste : oui tu peux, mais pas directement avec select. Tu vas devoir soit coder ta propre solution (avec javascript + css), soit utiliser une bibliothèque externe. Je te laisse te référer aux tutos ou documentations en ligne qui traitent du sujet. ChatGpt peut aussi t'aider mais si tu apprends, je ne te recommande pas de trop t'appuyer dessus.

Exemple d'un tutoriel pour mettre en place ta propre solution : https://www.youtube.com/watch?v=IoxHLJblUKQ

====
Si tu veux sélectionner une image à afficher à côté de ta liste, c'est beaucoup plus simple.

Dans ton html, pour chacune des options du select, tu mets en value le chemin de ton image, et tu enregistre un callback sur le onchange du select :

<div class="container mt-5"> <div class="row"> <div class="col-md-8 offset-md-2"> <div class="card"> <div class="card-body"> <h5 class="card-title">Liste des Amis Confirmés</h5> <select id="confirmedFriendsList" class="form-select" onchange="setFriendImage()"> <option value="assets/Jose.png">José</option> <option value="assets/Marianne.png">Marianne</option> </select> <button id="recommendFriendBtn" class="btn btn-primary mt-3">Recommander cet ami</button> <!-- Zone pour afficher l'image de l'ami sélectionné --> <div id="selectedFriendImage" class="mt-3"> <img id="friendImage" src="assets/Jose.png" alt="Photo de l'ami sélectionné" style="display: none;"> </div> </div> </div> </div> </div> </div>

Dans ton script, tu créé ton callback :

function setFriendImage() { const friendImage = document.getElementById('friendImage'); const selectedFriendUrl = document.getElementById('confirmedFriendsList').value; friendImage.src = selectedFriendUrl; } document.addEventListener('DOMContentLoaded', () => { setFriendImage(); // Pour être sûr que lors du chargement de la page, l'image affiché correspond bien à l'option par défaut });
juan.3594, il y a 1 an

Merci beaucoup Erkstone pour ta réponse je vais regarder ça.