Liste déroulante avec Image

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;

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.

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

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

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 !!

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.

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 !!

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

<? } ?>

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???

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 ;) )

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 !!!

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

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