Comment puis-je créer un menu déroulant qui affiche des images au lieu du texte ?

Affichage des images dans les options de liste déroulante

Créer une sélection déroulante contenant des images au lieu de texte peut s'avérer difficile. Bien que la combobox jQuery ait été proposée, elle repose sur la fourniture d'options de texte accompagnées d'images. Pour remplacer entièrement le texte par des images, une approche différente est nécessaire.

Une solution CSS intelligente

Pour ce cas d'utilisation spécifique, où les images représentent les épaisseurs de ligne dans un application de peinture, aucun JavaScript n'est requis. Au lieu de cela, nous pouvons exploiter les boutons radio et CSS pour créer l'effet souhaité.

Structure HTML

<div>
<p><strong>Style CSS</strong></p>
<pre class="brush:php;toolbar:false">#image-dropdown {
    border: 1px solid black;
    width: 200px;
    height: 50px;
    overflow: hidden;
    transition: height 0.1s;
}
#image-dropdown:hover {
    height: 200px; 
    overflow-y: scroll;
    transition: height 0.5s;
}
#image-dropdown input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
#image-dropdown label {
    display: none; 
    margin: 2px; 
    height: 46px; 
    opacity: 0.2; 
    background: url("http://www.google.com/images/srpr/logo3w.png") 50% 50%;
}
#image-dropdown:hover label {
    display: block;
}
#image-dropdown input:checked + label {
    opacity: 1 !important; 
    display: block;
}

Comment ça marche

L'astuce réside dans l'association des labels à la radio boutons utilisant les attributs "for" et "id". Lorsqu'un label est cliqué, le bouton radio correspondant est activé. Le style CSS garantit que :

• Dans l'état réduit, seule l'étiquette du bouton radio sélectionné est visible.
• Lorsque la liste déroulante est développée (au survol), toutes les étiquettes sont affichées.
• Les étiquettes suivant les boutons radio cochés restent visibles même à l'état réduit.

En attribuant des images d'arrière-plan à étiquettes, les options déroulantes apparaissent sous forme d’images. Cette approche remplace efficacement le texte par des images, obtenant ainsi la fonctionnalité souhaitée sans JavaScript.