Comment puis-je sélectionner parmi une liste d’options d’image ?

Question

J'essaie d'implémenter une conception dans laquelle l'entrée de sélection affiche une liste d'images parmi lesquelles choisir.

<select name="choose-image">
    <option value="" désactivée sélectionnée> Choisissez votre image</option>
    <option value="Souriant"><img src={image} alt="local-avatar" /></option>
    <option value="Triste">Triste</option>
</select>

La deuxième option n'affiche rien et même si c'est le cas, je dois styliser la liste déroulante et je ne sais toujours pas comment. Merci pour toute aide. Merci.

Answer 1

L'utilisation d'images directement dans la balise d'un élément n'est pas prise en charge en HTML. La raison pour laquelle la deuxième option n'affiche rien est que la balise

est destinée à être du texte brut, pas un élément HTML. Pour implémenter une conception dans laquelle vous souhaitez afficher une liste d'images à sélectionner, vous pouvez utiliser un menu déroulant de sélection personnalisé utilisant HTML, CSS et JavaScript. Il existe plusieurs bibliothèques et plugins disponibles qui peuvent vous aider à y parvenir, tels que Select2, Chosen ou une implémentation personnalisée utilisant CSS et JavaScript. Voici un exemple de création d'un menu déroulant de sélection personnalisé avec des images :

HTML

<div class="custom-select">
  <span class="selected-option">Choose your image</span>
  <ul class="options">
    <li data-value="Smiling"><img src="{image_url}" alt="Smiling" /></li>
    <li data-value="Sad"><img src="{image_url}" alt="Sad" /></li>
    <!-- Add more image options here -->
  </ul>
</div>

CSS :

css
.custom-select {
  position: relative;
  display: inline-block;
}

.selected-option {
  padding: 8px;
  border: 1px solid #ccc;
  cursor: pointer;
  display: block;
  width: 200px; /* Set the desired width of the select */
}

.options {
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  display: none;
  max-height: 200px; /* Set the desired max height of the dropdown */
  overflow-y: auto;
}

.options li {
  padding: 8px;
  cursor: pointer;
}

.options li:hover {
  background-color: #f0f0f0;
}

JavaScript :

const customSelect = document.querySelector('.custom-select');
const selectedOption = customSelect.querySelector('.selected-option');
const optionsList = customSelect.querySelector('.options');

selectedOption.addEventListener('click', () => {
  optionsList.style.display = optionsList.style.display === 'block' ? 'none' : 'block';
});

optionsList.addEventListener('click', (event) => {
  const selectedValue = event.target.getAttribute('data-value');
  selectedOption.textContent = selectedValue;
  optionsList.style.display = 'none';
});

Dans cet exemple, vous pouvez remplacer {image_url} par l'URL réelle de l'image que vous souhaitez afficher. Lorsque l'utilisateur clique sur la sélection personnalisée, il affichera une liste d'images et lorsque l'utilisateur sélectionne une image, il mettra à jour l'option sélectionnée en conséquence. Gardez à l’esprit qu’il s’agit d’un exemple basique et que vous devrez peut-être ajuster le CSS et le JavaScript en fonction de vos besoins spécifiques et de vos préférences de style. De plus, pour les applications plus complexes, envisagez d'utiliser un framework front-end comme React ou Vue.js.