msdropdown – Plugin jQuery – Des icones dans vos balises select/option

Javascript image dropdown (msdropdown), va vous permettre d’intégrer des images dans vos balises html select/option. En effet, à part firefox, aucun navigateur n’autorise de jouer avec le background css des balises option dans vos select. Ce qui fait qu’il est très difficile d’ajouter un icône à un choix dans une option de select, pourtant c’est un effet qui peut s’avérer utile et sympa tout en gardant l’intérêt d’être dans un formulaire. Grâce à msdropdown, vous allez pouvoir corriger le tir et ainsi insérer des images à vos options.

image-select-combobox-jquery

Utilisation :
Vous allez créer normalement vos select/option html, sauf que vous rajouterez un attribut title avec le chemin vers l’image souhaitée :

<select id="webmenu" name="webmenu" onchange="showValue(this.value)">
<option title="icons/icon_calendar.gif" value="calendar">Calendar</option>
<option title="icons/icon_cart.gif" value="shopping_cart">Shopping Cart</option>
<option title="icons/icon_cd.gif" value="cd">CD</option>
<option title="icons/icon_email.gif" selected="selected" value="email">Email</option>
<option title="icons/icon_faq.gif" value="faq">FAQ</option>
<option title="icons/icon_games.gif" value="games">Games</option>
</select>

Dans le head de votre fichier, vous aurez préalable appelé les éléments nécessaire au fonctionnement, à savoir jQuery, msdropdown et son css :

<script src="msdropdown/js/jquery.js" type="text/javascript"></script>
<script src="msdropdown/js/jquery.dd.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="msdropdown/dd.css" />

Puis les éléments javascript :

<script language="javascript">
$(document).ready(function(e) {
    $("body select").msDropDown();
});
</script>

 

Dans ce cas tous les select sont concernés, utilisé jQuery pour attribuer l’effet sur un id ou une class en particulier.

Retrouvez le site et la documentation ici : http://www.marghoobsuleman.com/jquery-image-dropdown
Et une démonstration ici : http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/mouse-events.html

Articles qui peuvent vous intéresser :

Author: Franck Pertegas

Share This Post On

3 Comments

  1. Bonjour,

    J’utilise la fonction jQuery MsDropDown pour réaliser ma liste déroulante d’icônes.

    Le problème, c’est qu’auparavant, j’utilisait l’attribut “title” pour visualiser une info-bulle qui permettait d’expliciter l’option.

    Je n’ai donc plus accès à cette fonctionnalité. Comment faire pour pouvoir ajouter des info-bulles au survol des différentes images présentes dans le sélecteur.

    Merci d’avance

    Philippe CABARBAYE

    philippe.cabarbaye[at]dbmail.com

    Post a Reply
  2. Bonjour,

    En effet, avec ce plugin il n’est plus possible d’utiliser l’attribut title pour de l’info.

    Cependant, il est possible de jouer avec l’évènement “onmouseover” afin de faire apparaitre un div d’explication par exemple.

    Post a Reply
  3. Il doit y avoir un moyen de passer par un autre attribut que title, genre rel ou autre… Je regarde et je vous tiens au courant.

    Post a Reply

Trackbacks/Pingbacks

  1. Zoomy – Plugin jQuery – Petit effet de zoom sur image simple et sympa | LudiBlog - [...] msdropdown – Plugin jQuery – Des icones dans vos balises select/option [...]
  2. Plupload – Le multi-upload avec du jQuery | LudiBlog - [...] msdropdown – Plugin jQuery – Des icones dans vos balises select/option [...]
  3. Easy Image Zoom – Plugin jQuery – Zoomez vos images | LudiBlog - [...] msdropdown – Plugin jQuery – Des icones dans vos balises select/option [...]
  4. Lien vers un plug in "Select" qui affiche des images,fonctionnant avec JQUERY. | Nicolas H codes - […] https://blog.ludikreation.com/2011/03/09/msdropdown-plugin-jquery-des-icones-dans-vos-balises-selecto… […]

Submit a Comment

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