Version complète: sur le forum Webmaster Hub : ajouter une image a une liste deroulante
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
TYBMHI
dimanche 7 septembre 2008 à 19:32
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 :

CODE
<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
tribords
lundi 8 septembre 2008 à 09:07
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 ...
yuston
lundi 8 septembre 2008 à 10:49
Plus simple!
CODE
<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))
crocxx
lundi 8 septembre 2008 à 15:53
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é smile.gif
TYBMHI
lundi 8 septembre 2008 à 20:59
Merci beaucoup à tous les trois de votre aide. Grace à vous voilà ce que j'ai fais:

CODE
<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.
Dudu
mardi 9 septembre 2008 à 06:40
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.
TYBMHI
mardi 9 septembre 2008 à 21:42
Merci beaucoup pour ta reponse je vais voir du coté javascript ! Merci encore !
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.