Liste déroulante avec Image [Résolu/Fermé]

- - Dernière réponse :  Thierry - 16 mai 2012 à 14:08
Ma Question est la suivante :


J'ai un formulaire dans mon site, avec une listes déroulantes avec plusieurs Options est j'aimerais attribué une image a chaques options ( L'image s'affiche a coté de la liste déroulantes ).

Si quelqu'un pourrait m'aider :)


Merci, Bonne continuation.
Afficher la suite 

13 réponses

Meilleure réponse
Messages postés
2898
Date d'inscription
dimanche 30 juillet 2006
Statut
Modérateur
Dernière intervention
5 juin 2018
609
1
Merci
Bonjour.

Ca ne marche pas de cette façon tout simplement ?
<option value="1"><img src="image.png"/>Option 1</option>

Sinon en CSS :
option#1{background:url(url de l'image) no-repeat}

<option id="1" value="1">Option 1 avec une image de fond mise en CSS</option>


EDIT : Ah effectivement ca ne marche pas...
Désolé.

Par contre, ca marche en CSS de cette facon, en mettant un span dans l'option :
<option><span id="img">Option 1</span></option>

CSS :
span#img{background:url(url de l'image) no-repeat}

Voila.

Pour que l'image soir bien positionnée, je penes qu'on peut faire :
display:block;
float:left;
width:taille de l'image;
height:idem;

Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 71487 internautes nous ont dit merci ce mois-ci

ta vu comment tu a tapé ta balise image !!!! :)
de plus tu ne peu pas mettre une image dans un selectbox , quand tu en vois un c'est une imitation de selectbox faite par un menu css

exemple : http://webfx.eae.net/dhtml/select/jsGenerated.html
0
Merci
est il possible de voir à quoi ressemble ta liste déroulante... car j'essaie de faire un truc tout simple (liste déroulante d'objet (ballon/carte/dé/...) avec des petites gif représentant cela à côté mais je ne parviens pas à avoir un résultat..meme avec les css (je dois peut etre me reposer...)
et je pense que tu as voulu faire un truc semblable?
merci

arthur
Messages postés
2898
Date d'inscription
dimanche 30 juillet 2006
Statut
Modérateur
Dernière intervention
5 juin 2018
609
0
Merci
Salut.

Bizarre effectivement.
Moi aussi j'avais réussi, puis ca n'a plus marché avec un autre essai.

Je vais réessayer.

a plus
yaya18
Messages postés
5
Date d'inscription
mardi 31 janvier 2006
Statut
Membre
Dernière intervention
29 juin 2007
-
Salut,
Je suis intéressée par la discussion concernant la liste déroulante avec affichage d'une image pour chacun des choix...
As-tu réussi à faire fonctionner ta solution qui consistait à utiliser un span sur le choix et un CSS?
Si oui, pourrais-tu me donner des précisitions.
J'ai essayé tes conseils précédents et l'image ne s'affiche pas. Le chemin de l'image est bon, je ne vois pas d'où cela peut venir.
Voilà ce que j'ai mis :
Dans le code de la page:
<select name="maliste">
<option value="choix1"><span id="img">Attention</span></option>
</select>


Dans le fichier CSS:
.image
{background:url("adresse_image") no-repeat}

D'autre part, ma page est bien attachée à mon fichier CSS.

Merci de ton aide.
yaya18
0
Merci
Bonjour à tous !! je suis moi aussi interessé par ce code. Est-ce qu'il serais possible de voir un exemple en fonctionnement ainsi que le code source de cet exemple (celui du php et du css) car je n'arrive pas à modifier le code pour l'adapter à mon site ?
Merci d'avance !!
0
Merci
Moi je suis entrin d'expérimenter ca

<ul id="1">
<li><img src="votre image" alt="" />option1</li>
<li><img src="votre image" alt="" />option2</li>
<li><img src="votre image" alt="" />option3</li>
<li><img src="votre image" alt="" />option4</li>
</ul>

voilà ca fonctionne bien, mais j'arrive pas à bien positionner les textes des li

alors je pense que je vais essayer ca ...


<ul id="2">
<li><img src="votre image" alt="" /></li>
<li><img src="votre image" alt="" /></li>
<li><img src="votre image" alt="" /></li>
<li><img src="votre image" alt="" /></li>
</ul>

<ul id="1">
<li>option1</li>
<li>option2</li>
<li>option3</li>
<li>option4</li>
</ul>

#1{float :left;}
#2{float :right;}

voilà me je pense que la deuxième solution vous intéressera moins. la première fonctionne par contre.
0
Merci
Bonjour,

Je copie pjmag44

Bonjour à tous !! je suis moi aussi interessé par ce code. Est-ce qu'il serais possible de voir un exemple en fonctionnement ainsi que le code source de cet exemple (celui du php et du css) car je n'arrive pas à modifier le code pour l'adapter à mon site ?
Merci d'avance !!
0
Merci
Rebonjour, en fait j'ai trouvé le code que je cherchais depuis longtemps, il permet de faire une liste (un select plus précisément) pour laquelle en fonction de l'option choisie, s'affiche une petite (ou grande bien sur^^) image à coté (le champs d'image est fixe dans mon code)

javascript :

//Changement de l'image
var current = 0;
function change(what)
{
document.getElementById("show").src = "http://monsite.fr/dossier1/dossier2/"+what.value+".png";
}


html :

<select name="select1" id="select1" onchange="change(this)">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
...
<option value="5">5</option>
</select>
<img src="http://monsite.fr/dossier1/dossier2/image-par-defaut.png" id="show" alt="" />



voila c'est une solution entièrement fonctionnelle testé sous IE 6, IE 7 et les dernières versions de Firefox.
Merci pour ce code ! impec ! :)
Excellent Merci
0
Merci
J'ai trouvé !!!

function change_image_ligne(what,ligne)
{
document.getElementById("show_"+ligne).src = "http://monsite.fr/dossier1/dossier2/"+what.value+".png";

}


et puis

<?
for($i = 1; $i < 3; $i++) {
?>

// Puis ensuite ta fonction....

<select name="<? echo $i; ?>" onchange="change_image_ligne(this,<? echo $i; ?>)">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
...
<option value="5">5</option>
</select>
<img src="http://monsite.fr/dossier1/dossier2/image-par-defaut.png" id="show_<? echo $i; ?>" alt="" />

// et je boucle mon $i

<? } ?>
0
Merci
Merci de tes encouragements...

Mais kan on est non informaticien "professionnel" comme je le suis, donc je n'ai pas vos "réflexes", crois-tu cependant que l'on peut se mettre à un nouveau langage???
Messages postés
1
Date d'inscription
dimanche 23 décembre 2007
Statut
Membre
Dernière intervention
2 septembre 2008
0
Merci
dsl bg62 je suis inscrit depuis longtemps mais j'ai toujours la flemme de me connecter, maintenant c'est chose faite^^

Pour te répondre cacoun je ne suis pas informaticien professionnel lol je viens juste de finir ma terminale :p cela dis tu peux bien sur te mettre à un nouveau language et dans le développement web il te sera toujour utile d'en connaitre plusieurs.

Moi qui n'ai pas encore beaucoup d'experience dans le domaine, je programme mon site en html (valide xhtml 1.0 ;) ), php, javascript, ajax, mySQL, j'utilise aussi un peu de flash (lecteurs videos et audios) et le css pour le style. Donc je t'encourage même a te renseigner sur les nouvelles technologie ainsi que leurs possibilités afin de ne pas avoir à tout refaire régulièrement ^^

bonne continuation !

(PS pour bg62 : le post est peut être ancien mais il interesse toujours donc je ne vois pas ce que ça change ;) )
Messages postés
13
Date d'inscription
jeudi 23 juin 2005
Statut
Membre
Dernière intervention
3 mars 2009
2
-1
Merci
Nouveau défi pjmag44,

Je voudrais utiliser ton script + ajouter plusieurs select... Je m'explique

Dans une même page, je fais apparaitre plusieurs fois le select (par une boucle for) et les images en face du select doivent être modifiées

exemple :

<?
for($i = 1; $i < 3; $i++) {
?>

// Puis ensuite ta fonction....

<select name="<? echo $i; ?>" onchange="change(this)">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
...
<option value="5">5</option>
</select>
<img src="http://monsite.fr/dossier1/dossier2/image-par-defaut.png" id="show" alt="" />

// et je boucle mon $i

<? } ?>


Le souci est qu'il n'y a que ma première image qui change !!!
merci
trés bien
trés bien
merci
merci
merci
mrci
c'est vraiment géniale qu'on trouve des gens comme vous dans notre forum
je répète et je répète
merci
merci
-1
Merci
Parfait !! On voit que tu as bien compris le code !! Les possibilités de ce type de code sont énormes, surtout dans des systèmes plus complexes ou l'on peut ajouter de l'ajax.
bon développement !!!! à bientot
Messages postés
23293
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
3 novembre 2019
1802
-2
Merci
bonjour
je me répète ... mais : inscrivez-vous sur le forum, ne restez pas "anonyme" ...
c'est bien plus sympa (et efficace !) pour les bénévoles qui vous aideront par leur réponse !
et de plus ce post est bien trop ancien ....
@+
b g
Merci vraiment pour ce petit bout de code, il est modifiable à souhait et m'a rendu un grand service ... Cédric