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.
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 :
<option value="calendar" title="icons/icon_calendar.gif">Calendar</option>
<option value="shopping_cart" title="icons/icon_cart.gif">Shopping Cart</option>
<option value="cd" title="icons/icon_cd.gif">CD</option>
<option value="email" selected="selected" title="icons/icon_email.gif">Email</option>
<option value="faq" title="icons/icon_faq.gif">FAQ</option>
<option value="games" title="icons/icon_games.gif">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 :
Puis les éléments 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 :
- Pixlr – Editeur d’images en ligne – Un photoshop sur le net ?
- FullCalendar – Plugin jQuery – Créez vos propres agendas comme Google
- Sortie de jQuery 1.5
- GMAP3 – Plugin jQuery – L’API Google Map v.3 Integration à la sauce jQuery
- TinyMCE – Un nouveau site officiel
scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">
[...] msdropdown – Plugin jQuery – Des icones dans vos balises select/option [...]
[...] msdropdown – Plugin jQuery – Des icones dans vos balises select/option [...]
[...] msdropdown – Plugin jQuery – Des icones dans vos balises select/option [...]
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
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.
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.