Rechercher : dans
Par :

Liste déroulante avec Image

Dernière réponse le 14 mai 2009 à 18:47:45 The-Diable, le 5 nov 2006 à 14:09:21 
 Signaler ce message aux modérateurs

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.

1

Ssylvainsab, le 5 nov 2006 à 17:07:18

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

Répondre à Ssylvainsab

4

dogmongo, le 16 mar 2007 à 12:48:34

Ta vu comment tu a tapé ta balise image !!!! :)

Répondre à dogmongo

5

dogmongo, le 16 mar 2007 à 13:23:39

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

Répondre à dogmongo

2

arthur, le 8 déc 2006 à 03:06:22

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

Répondre à arthur

3

Ssylvainsab, le 9 déc 2006 à 09:37:39

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 Sylvain
Longue vie à bobo !

Répondre à Ssylvainsab

6

yaya18, le 29 jun 2007 à 13:45:47

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

Répondre à yaya18

7

pjmag44, le 23 déc 2007 à 14:36:27

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

Répondre à pjmag44

8

Juxorevo, le 21 jui 2008 à 10:52:29

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.

Répondre à Juxorevo

9

cacoun, le 22 aoû 2008 à 20:09:09

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

Répondre à cacoun

10

pjmag44, le 24 aoû 2008 à 03:26:45

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.

Répondre à pjmag44

11

cacoun, le 1 sep 2008 à 18:59:01
  • +1

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

Répondre à cacoun

17

 qsdfg, le 14 mai 2009 à 18:47:45
  • +1

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

Répondre à qsdfg

12

cacoun, le 1 sep 2008 à 23:47:17

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

<? } ?>

Répondre à cacoun

13

pjmag44, le 2 sep 2008 à 01:25:19

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

Répondre à pjmag44

14

cacoun, le 2 sep 2008 à 09:54:44
  • +1

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

Répondre à cacoun

15

bg62, le 2 sep 2008 à 12:09:47

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
le 'www' est fait aussi pour communiquer, partager et échanger, non ?

Répondre à bg62

16

pjmag44, le 2 sep 2008 à 19:24:00

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

Répondre à pjmag44