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 

<!-- Liste des amis confirmés -->
<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.

Salut

Les balises <option> ne peuvent pas contenir autre chose que du texte, donc à proprement parler tu ne pourras pas mettre d'image dans la liste.

Si tu souhaites que, lors de la sélection d'un ami, son image soit affichée là où tu l'as prévu, je vois deux manières de faire qui demandent de connaître soit un langage serveur (PHP, etc.), soit JavaScript. Est-ce que tu en manipules l'un ou l'autre ? Le cas échéant, je demanderai de faire déplacer ce sujet dans le forum adapté.

-
Edité par Ymox 21 janvier 2025 à 10:57:44

Bonjour Ymox

Suite a ta réponse je manipules du HTML et Javascript car je me sers de Bootstrap. Je me suis aussi posé la question pour faire ce genre de choses c'est d'implémenter du CSS. Qu'en penses tu?

Que le CSS ne permet pas à ma connaissance de changer l'affichage d'un élément en fonction d'un autre (à part avec <details> qui demanderait une adaptation HTML/CSS très poussée pour le résultat souhaité à mon avis), mais si c'est désormais possible (autrement), je suis curieux de savoir comment.

Que connais-tu de JavaScript exactement ? Si je te parle de d'écouteurs de clics, c'est clair pour toi ?

-
Edité par Ymox 23 janvier 2025 à 20:47:43

Hello,

Si tu veux afficher une instruction inline, passe en éditeur html, et entoure ton code des balises <code>....</code>. Ce sera beaucoup plus lisible que du code coloré 

Edit: orthographe

-
Edité par edgarjacobs 26 janvier 2025 à 18:53:01

Bonjour, je ne pense pas que ce soit possible en CSS, les options sont difficilement stylisable en CSS.

>> je me sers de Bootstrap.

Il y a les dropdowns en Bootstrap => https://getbootstrap.com/docs/5.3/components/dropdowns/ tu mets ce que tu veux dedans.

J'ai trouvé ce dépôt qui pourrait être utile => https://github.com/lorenzos/FancySelect

Je déplace dans le forum JavaScript.

Déplacement vers un forum plus approprié

Le sujet est déplacé de la section HTML / CSS vers la section Javascript