Aller au contenu

ajouter une image a une liste deroulante


Sujets conseillés

Posté

Bonjour à tous,

J'aimerais créer un menu déroulant dans un formulaire. ce menu déroulant devra afficher des images qui sont stockées sur le serveur.

Voilà ce que j'ai fait mais rien ne s'affiche :

<select name="smiley" id="smiley">

<option value="http://www.monsite.fr/essai/image/humeur/jenesaispas.gif"><img src="http://www.monsite.fr/essai/image/humeur/jenesaispas.gif"/></option>

</select>

L'adresse est bonne.

Merci d'avance pour votre aide

Posté

En mettant un <span> dans le <option> et en mettant un style par CSS à ton <span> background:url(image.jpg) ça devrait marcher

Mais à tester, je n'en suis plus sûr ...

Posté

Plus simple!

<select>
<option style="background-color:red;">Fond couleur</option>
<option style="color:red;">Texte couleur</option>
<option style="background-image:url('images/image.png')">Fond image</option>
</select>

Mais insérer une image à proprement parler, je ne pense pas que cela soit possible sauf si tu émules un select via des puces à listes (je pense notamment à cette page (en bas))

Posté

Bonjour,

Le comportement d'un fond en image et d'une image sont différent, pour pas que l'image soit coupé il ne faut pas oublier de donner une auteur et une largeur a la balise option pour ne pas quel soit coupé :)

Posté

Merci beaucoup à tous les trois de votre aide. Grace à vous voilà ce que j'ai fais:

<select>
<option value="http://www.monsite.fr/essai/image/humeur/cpourrire.gif" style="background:url('http://www.monsite.fr/essai/image/humeur/cpourrire.gif') no-repeat;height:20px;width:100px;padding-left:1.1cm;">Juste pour rire !</option>
</select>

là, l'image se met en fond d'écran et apparait bien lorsque on ouvre le menu déroulant, mais disparait une fois qu'on la sélectionnée et seul le texte reste.

et pour faire propre je suis obligé de décalé le texte sur la droite pour pouvoir être visible car sur l'image on ne voit rien.

En fait je viens de réaliser que ce que j'aurais aimé est exactement le même menu déroulant que celui qui propose des émoticones lors de la conception de message sur webmaster hub.

C'est pas vraiment comme je l'aurai voulu mais c'est bien mieux que rien. Donc encore merci à vous.

Posté

Salut

Tel quel, tu ne pourras pas faire ça. Peut-être que certains navigateurs vont accepter les codes donnés ci-dessus, mais aucun n'est une solution viable: il est actuellement impossible de faire ce que tu désires (et c'est bien dommage, je te l'accorde).

La solution ? Tu l'as trouvé toi-même: faire comme sur le Hub. C'est-à-dire émuler en Javascript le comportement d'une liste déroulante. Je ne vois que ça comme solution pérenne à ton problème.

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...