28172 sujets

CSS et mise en forme, CSS3

Menu déroulant avec images

Bonjour,

Je sais que cette question est souvent posée, mais je trouve aucune solution.

J'aimerais avoir un menu déroulant (<select>) dont les <option> seraient des images.
J'ai essayé de modifier l'attribut style mais ca ne marche que sous Firefox :s

Avez-vous une solution ?

Merci par avance,
Guillaume.
Ben j'ai une liste d'images. Je voudrais faire une menu déroulant, donc j'ai tsté ca :


<select>
<option style='background: url('1jpg') no-repeat">&nbsp;</option>
<option style='background: url('2jpg') no-repeat">&nbsp;</option>
</select>


Là j vois bien mes images mais que sous firefox.
C'est peut-être une erreur de guillemets

Essaie ça

<select> 
<option style="background: url('1jpg') no-repeat">&nbsp;</option> 
<option style="background: url('2jpg') no-repeat">&nbsp;</option> 
</select>

Modifié par FlorianCardin (27 Jul 2011 - 17:32)
Oui désolé j'ai mal tapé le code, mais non, ce n'est pas une erreur de guillemets.

J'ai un collègue qui a fait la même chose sur un autre truc et il a constaté le même soucis :s
Bonjour,

Ton besoin amène à créer un composant d'interface personnalisé via Javascript / DOM.
Avant de passer par ça, quelle est l'utilité de cette liste déroulante (simple menu ou élément de formulaire destiné à fournir des données au serveur) ?

PS : des options de liste déroulante vides c'est le mal Smiley bawling .
Modifié par yodaswii (27 Jul 2011 - 17:42)
En gros, ca permet à l'utilisateur e choisir une police pour un texte à graver sur une plaque (genre plaque de docteur) et je ne dispose que des images de la police, et pas de la police elle-même.
D'accord. Comme dit précédemment, l'élément select ne permet pas d'utiliser des images.

Plusieurs solutions :

1) Se passer d'une liste déroulante et opter pour des boutons radios :

<fieldset>
<legend>Choix de la police</legend>
<p><input type="radio" id="police1" name="police" value="1" /> <label for="police1"><img src="..." alt="Nom de la police" /></label></p>
...
</fieldset>

Inconvénient : ça prend plus de place qu'une liste déroulante et ça peut devenir gênant si le choix est important.

Cette solution n'exclut pas de pouvoir avoir recours au DOM pour créer le composant d'interface mentionné.

2) Cette solution n'est pas recommandée. Utiliser une liste déroulante sans image et générer en plus une liste non ordonnée (ul) avec les images (et les bonnes alternatives) en Javascript / DOM. Le code HTML sans Javascript et devant être modifié avec :

<p>
<label for="police">Choix de la police :</label> 
<select id="police" name="police">
<option value="1">Nom de la police</option>
...
</select>
</p>

Inconvénient : nécessite des compétences en scripting et nécessite de faire la correspondance entre l'élément select et la liste non ordonnée.
Modifié par yodaswii (29 Jul 2011 - 16:44)
Merci de ta réponse.

J'avais pensé aux boutons radios mais j'en ai vraiment trop à afficher :s

Pour ta seconde alternative, qu'entends-tu par générer une ul d'images ? Je la place où ?

Sinon, je pense partir sur un affichage type popup via jQuery UI qui affiche toutes les images (une sorte d'image picker).
Je corrige mon dernier post. Seule la première source HTML avec le fieldset est correcte.

Dans l'idée, développer déjà ça sans Javascript puis créer à la volée le composant.

rg701653 a écrit :
Pour ta seconde alternative, qu'entends-tu par générer une ul d'images ? Je la place où ?


- utiliser le DOM pour récupérer la liste des images concernées (éléments img) ;
- générer la liste (élément ul) via DOM en la peuplant avec la liste des éléments img ;

Il s'agira ensuite de :
- masquer proprement le fieldset via CSS ;
- masquer proprement la liste précédemment générée ;
- mettre en place des événements sur chaque item de la liste générée (qui devra mettre à jour la coche dans le fieldset).

Cela demande vraiment quelques compétences et aussi du temps ...

Romain
Sujet clos
Aller à