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 :


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
  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 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>

Le résultat

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

CommentLuv badge