liste déroulante avec images

Liste déroulante avec images

En cherchant à ajouter des images au sein d'une liste déroulante en html, je me suis aperçu que c'était impossible de façon "classique". On ne peut pas ajouter de balises <img> après la balise <option > d'une liste.

Petit rappel :
pour créer une liste en html la syntaxe est la suivante :

< select name="nom de la liste" size="1" >
< option>choix1 </option >
< option>choix2 </option >
< option>choix3 </option >
< /select >

on obtient ainsi :

choix1choix2choix3

Mon but était d'insérer des pictos au début de chaque ligne de la liste
La solution que j'ai trouvé s'appelle : dhtmlxCombo

La procédure

Bon, j'avoue que c'est un petit peu long mais lorsqu'on veut quelque chose... on fini souvent par oublier l'énergie qu'on a dépensé pour y arriver n'est-ce pas?!...

1) Téléchargez les fichiers Javascript et css nécessaires sur le site officiel : ici
2) Pour cet exemple je ne vais m'attarder que sur l'insertion d'images au sein d'une liste déroulante mais dhtmlxCombo propose une multitude d'autres possibilités...

Vous avez besoin de 3 fichiers Javascript et un css... Donc, pour commencer, voici comment doit se présenter l'entête de votre page :

<script>
window.dhx_globalImgPath="../../codebase/imgs/";
</script>
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxcombo.css">
<script src="../../codebase/dhtmlxcommon.js"></script>
<script src="../../codebase/dhtmlxcombo.js"></script>
<script src="../../codebase/ext/dhtmlxcombo_extra.js"></script>

La première ligne sert à spécifier dans quel dossier aller chercher certaines des images nécessaires pour afficher la liste. Ensuite on spécifie le chemin du css puis des 3 Javascript.

3) L'opération va se dérouler en 2 temps : premièrement on va créer la liste déroulante dans un fichier xml, deuxièmement on va l'appeler dans la page html via un peu de code Javascript couplé à un brin de css... (j'avais prévenu c'est un peu fastidieux pour une petite liste déroulante illustrée...

Pour créer votre liste ça se passe dans le fichier data.xml.
exemple :

<complete>
<option value="1" img_src="../images/firefox.gif">choix1</option>
<option value="2" img_src="../images/ie.gif">choix3</option>
<option value="3" img_src="../images/opera.gif">choix3</option>
</complete>

ensuite...
dans votre page html, vous appelez la liste déroulante comme ceci :

<div id="combo_zone2" style="width:200px; height:30px;"> </div>

C'est avec l'id du div ("combo_zone2") que vous aller charger votre liste déroulante grâce à un petit bout de code javascript :

<script>
var z=new dhtmlXCombo("combo_zone2","alfa2",200, 'image');
z.setDefaultImage("../images/firefox.gif");
z.loadXML("data.xml");
</script>

Le résultat :