Posez votre question Format imprimable Liste des forums Aidez-les Statistiques Rechercher Charte Forum Webmastering

Découvrez notre sélection d'idées cadeaux pour Noël !

Statut : Résolu

Liste déroulante avec Image

The-Diable, le dimanche 5 novembre 2006 à 14:09:21

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.

Répondre à The-Diable Signaler ce message aux modérateurs Aller au dernier message

1Ce message vous semble utile, votez !
Ce message ne vous semble pas utile, votez !
Signaler ce message aux modérateurs

Ssylvainsab, le dimanche 5 novembre 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

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

dogmongo, le vendredi 16 mars 2007 à 12:48:34

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

Répondre à dogmongo

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

dogmongo, le vendredi 16 mars 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

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

arthur, le vendredi 8 décembre 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

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Ssylvainsab, le samedi 9 décembre 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

1Ce message vous semble utile, votez !
Ce message ne vous semble pas utile, votez !
Signaler ce message aux modérateurs

yaya18, le vendredi 29 juin 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

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

pjmag44, le dimanche 23 décembre 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

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Juxorevo, le lundi 21 juillet 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

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

cacoun, le vendredi 22 août 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

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

pjmag44, le dimanche 24 août 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

1Ce message vous semble utile, votez !
Ce message ne vous semble pas utile, votez !
Signaler ce message aux modérateurs

cacoun, le lundi 1 septembre 2008 à 18:59:01

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

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

cacoun, le lundi 1 septembre 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

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

pjmag44, le mardi 2 septembre 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

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

cacoun, le mardi 2 septembre 2008 à 09:54:44

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

1Ce message vous semble utile, votez !
Ce message ne vous semble pas utile, votez !
Signaler ce message aux modérateurs

bg62, le mardi 2 septembre 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

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

pjmag44, le mardi 2 septembre 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

Posez votre question Répondre

Résultats pour Liste déroulante avec Image

Access requetes parametrees (Résolu) Salut à tous, Voilà j'ai une petit problème sur ACCESS2000. J'utilise une requête paramétrée pour crée une liste déroulante. Imaginez un formilaire Entreprises; pour sélectionner son pays dans une liste des pays, et, une fois le pays... www.commentcamarche.net/forum/affich-1780568-access-requetes-parametrees

Fonction onchange sur une liste deroulante my (Résolu) Bonjour, je cherche comment utiliser la fonction on change avec une liste deroulante qui me liste une table d'une base mysql. je m'explique le liste les données n_serveur et je souhaiterai quand je selectionne une des donnees... www.commentcamarche.net/forum/affich-2800630-fonction-onchange-sur-une-liste-deroulante-my

Listes déroulantes simples avec Excel Dans votre tableau, vous souhaitez insérer un texte ou une valeur choisi dans une liste (déroulante). vous créez votre liste, ligne aprés ligne, sur votre feuille en cours ou sur une autre feuille du classeur en cours. vous la nommez : INSERTION... www.commentcamarche.net/faq/sujet-8674-listes-deroulantes-simples-avec-excel

Réponses suivantes

Résultats pour Liste déroulante avec Image

[php/AJAX] Listes déroulantes (Résolu)Bonjour, J'ai un petit problème de listes déroulantes. J'ai beau cherché sur différents forums je ne trouve pas la réponse à ma question. J'ai 2 listes déroulantes ('familles' et 'sous-familles') issues directement... www.commentcamarche.net/forum/affich-2188286-php-ajax-listes-deroulantes

Créer une Liste déroulante (Word 2003) (Résolu)Bonjour, Je souhaite insérer dans un questionnaire sous Word 2003 une liste déroulante. Pour cela, je vais dans Affichage, Fomulaires, j'appuie sur l'icone Liste déroulante de formulaire, mais après je n'arrive pas à insérer la liste de... www.commentcamarche.net/forum/affich-4890178-creer-une-liste-deroulante-word-2003

Excel - Liste déroulante conditionnelle (Résolu)Bonsoir, Je voudrais arriver à créer sous Excel une liste déroulante dont le contenu affiché serait fonction de la valeur de la cellule d'avant (qui est elle-même une liste déroulante). Pour être plus clair, j'ai une liste de services... www.commentcamarche.net/forum/affich-4918759-excel-liste-deroulante-conditionnelle

Réponses suivantes