11548 sujets

JavaScript, DOM et API Web HTML5

Script menu déroulant : <select> avec photo ou image

Bonjour à tous !

Je cherchais depuis longtemps comment mettre une image dans un champs déroulant et je m'étais résigné lisant sur différents forum que c'était impossible !!!!

Or voila que par hasard je tombe sur ce site :
http://www.armano.fr/mag/fr/product-146520.htm

Comme vous pouvez le voir, sur la droite il y a un menu déroulant comprenant des images ...

Quelqu'un aurait-il un script ou des conseils pour le faire ?

Merci d'avance de votre aide
Modifié par masremi (19 Mar 2009 - 13:19)
Double poste -_- (les modos peuvent déplacer les sujet quand c'est nécessaire)

Pourquoi ne pas simplement aller regarder le code du site ?
Comme tu peut le constater il s'agit plus d'un astuce que d'une intégration d'images dans un un champs de sélection. Le champs en question est constamment désactiver, et il l'est toujours désactiver.

Un simple rollover fait passer de hiden à visible un div conteneur de l'information et des images. C'est juste une illusion. Le champs « select » n'est qu'un prétexte visuel pour activer au besoin en simple rollover.

Dans la réalité des faits aucune images, pas même l'information, n'est intégrer au champs « select ».

++ : Smiley biggrin
Modifié par zardoz (19 Mar 2009 - 16:04)
Bonjour,

Le site donné comme exemple n'est en tout cas pas un exemple à suivre. Le faux SELECT tente de reproduire l'apparence d'un SELECT «normal» mais:
- il n'y arrive pas;
- il y arrive encore moins pour les systèmes d'exploitation autres que Windows (sous Mac ou Linux, c'est assez risible);
- le comportement proposé est différent de celui d'un SELECT.

Notons en passant que:
- s'il s'agit de navigation, il faut en réalité construire une sorte de menu déroulant;
- s'il s'agit de faire un choix entre plusieurs options dans un formulaire (rôle du SELECT)... eh bien ça devient beaucoup plus difficile, surtout si on souhaite obtenir quelque chose qui soit utilisable au clavier, qui se dégrade correctement en SELECT normal en l'absence de JavaScript, voire qui soit utilisable avec un lecteur d'écran.

Dans le deuxième cas, je conseillerais donc de garder un SELECT normal... ou d'envisager autrement l'ergonomie.

Cependant, il me semble qu'il existe des scripts qui permettent de remplacer un SELECT par une série d'éléments «neutres» (liste, série de DIV, etc.). Avec des résultats assez variables pour l'accessibilité (du vaguement correct au catastrophique). Je n'en ai pas retrouvé dans mes marque-pages mais ça doit se trouver.
Bonsoir à tous !

Merci pour votre aide !!!

En effet j'avais un peu regardé le code ! mais bon je voulais savoir si quelqu'un aurait un script qui aurait pu répondre à mes besoins et que je n'aurais pas pu trouvé auparavant ...

Bon à ce que j'ai lu, il vaut mieux éviter ce genre de script ... dommage cela me serait fort utile sur une boutique online ... mais bon si ce n'est pas du <select> il va falloir faire une usine à gaz pour pouvoir envoyer les éléments de la form ...

Je reste donc sur ma solution actuelle ... c'est à dire des puces, ou on peut ajouter facilement des images Smiley cligne

Merci à tous pour la participation !!! Smiley langue
Sujet clos
Aller à