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 :
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?!…
- Téléchargez les fichiers Javascript et css nécessaires sur le site officiel
- 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 type="text/javascript" src="../../codebase/dhtmlxcommon.js"></script> <script type="text/javascript" src="../../codebase/dhtmlxcombo.js"></script> <script type="text/javascript" src="../../codebase/ext/dhtmlxcombo_extra.js">
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 :
<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>