Liste déroulante avancée (avec images)

Bonjour, je veux créer une liste déroulante avancée qui contienne des images (sur chaque ligne), voici un exemple :

http://www.oanda.com/lang/fr/currency/converter/

Les balises traditionnelles (select et option) ne permettent pas de faire ça, donc il va falloir trouver une solution mélangeant habillement HTML, CSS et JavaScript.

Je cherche des tutoriaux ou des idées sur les différentes manières de s'y prendre (le plus simple possible).

Il faudrait une solution qui fonctionne au moins sous Firefox et IE7.

Merci

Bonjour,

Pourquoi ne pas étudier le code de ton exemple pour le comprendre et ainsi pouvoir faire ce que tu souhaites ?

C'est ce que j'ai fais, mais comme il me paraissait un peu compliqué, je me suis dis que peut-être on me proposerait une solution plus simple.

J'ai bien avancé niveau HTML/CSS, maintenant il me reste le JavaScript, avec jQuery : convertisseur de devise.

Seulement je débute en jQuery, pour le moment je sais juste utiliser les fonctions d'animation basiques (slide, fade...).

Je voudrais que quand on clique sur une ligne dans la liste déroulante dv_dropdown_source, ça charge le contenu de la ligne dans dv_box_top, et que ça enroule la liste déroulante (slideToggle).

Comment faire ça rapidement, affecter un onclick à tous les éléments de la liste automatiquement, dans une sorte de boucle ?

Bonjour,

si tu veux cibler plusieurs éléments à la fois, il te suffit de commencer ton instruction par le sélecteur qui va bien, la syntaxe étant assez proche des CSS (CSS3 compris )
http://jquery.developpeur-web2.com/documentation/selecteurs.php

$("#nav li:not(.podimage)").click();

http://jquery.developpeur-web2.com/documentation/evenements/click.php
Modifié par Felipe (18 Feb 2010 - 16:48)

Quelqu'un sait pourquoi le background-image ne fonctionne pas sur les <select> et <option> ?

J'ai fait le test et ça marche juste dans firefox mais nul part ailleurs. Ça aurait été 100 fois plus simple de cette façon là.