Magazine Graphisme

liste déroulante avec images

Publié le 04 mai 2008 par Detruk
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 :
&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;Votre navigateur ne peut malheureusement pas afficher de cadre incorporé: Vous pouvez appeler la page incorporée&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; par ce lien: &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href="http://www.comonweb.info/tests/dhtmlxCombo/samples/options/test.html"&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;Résultat&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;

Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

A propos de l’auteur


Detruk 19 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Magazines