Liste déroulante avec image

Bonjour, je voulu faire une liste déroulante avec select mais au lieu de mettre du texte je voudrais mettre des images.

<select>
<option><img src="nom du fichier"></option>
</select>

Évidement sa marche pas, je cherche une idée pour le faire autrement et si possible en css uniquement

Merci
Modifié par stephcache (02 Oct 2011 - 22:29)

À ma connaissance c'est soit impossible, soit possible uniquement dans certains navigateurs.

La seule solution pour arriver à cet effet consiste à créer une fausse liste déroulante à base d'un peu de HTML, d'un peu de CSS, et de beaucoup de JavaScript (gestion des évènements souris et clavier, changement d'état, renseignement de la valeur d'un élément de formulaire tel qu'un SELECT masqué ou un INPUT de type "hidden").

Sinon, si tu as peu d'images, peut-être préférer l'utilisation d'éléments <input type="radio"> et placer tes images dans les éléments LABEL associés?

<p class="select-image">
  <span class="select-image-option">
    <input type="radio" name="my-image" value="1" id="form-my-image-1" />
    <label for="form-my-image-1"><img src="..." alt="Texte alternatif pertinent" /></label>
  </span>
  <span class="select-image-option">
    <input type="radio" name="my-image" value="2" id="form-my-image-2" />
    <label for="form-my-image-2"><img src="..." alt="Un autre texte alternatif" /></label>
  </span>
  <span class="select-image-option">
    <input type="radio" name="my-image" value="3" id="form-my-image-3" />
    <label for="form-my-image-3"><img src="..." alt="Encore un autre" /></label>
  </span>
<p>

À partir de cette base, rien n'empêche d'être un peu original côté présentation et ergonomie.

J'ai pas mal d'image en faite, environ 48 et je me douté un peut que je devrais utilisé le java mais je viens tout juste de me mettre au css alors le java sa va pas être facile

Et l'eau,

Et un système de QueryString dans un déroulant (envoie de variables en GET) ? S'il y a juste un déroulant, je ne vois pas l'intéret du form sauf si tu as des options liées aux images.

oui c'est pour les insérés dans la zone texte

C'est pas une liste déroulante mais c'est pas mal non plus

<style type="text/css">
.conteneurListe{
  border: inset 2px #444444;
  overflow: scroll; 
  overflow-x: hidden;
  width: 50px; 
  height: 100px;
}
 
.item{
  background-color:;
  color: #000000;
  margin: 2px;
  text-align: center;
}
 
.itemSelectione{
  background-color: #2222AA;
  color: #FFFFFF;  
  margin: 2px;
  text-align: center;
}
 
#liste1{
  list-style: none;
  padding: 0px; 
  margin: 0px;
}
</style>

<div class="conteneurListe">
  <ul id="liste1">
  <?php foreach($liste_emoticones as $lettre => $fichier)
  {echo("<li class=\"item\" onclick=\"insertTag(' ($lettre) ', '', 'textarea')\"><IMG alt=\" \" src=\"$fichier\"></li>");}
  ?>       
  </ul>
</div>