Liste déroulante avec Image
Résolu/Fermé
A voir également:
- Menu déroulant avec image html
- Menu déroulant excel - Guide
- Image iso - Guide
- Editeur html - Télécharger - HTML
- Menu démarrer windows 11 - Guide
- Acronis true image - Télécharger - Sauvegarde
13 réponses
Ssylvainsab
Messages postés
2884
Date d'inscription
samedi 29 juillet 2006
Statut
Modérateur
Dernière intervention
15 août 2020
825
5 nov. 2006 à 17:07
5 nov. 2006 à 17:07
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;
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.
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
et je pense que tu as voulu faire un truc semblable?
merci
arthur
Ssylvainsab
Messages postés
2884
Date d'inscription
samedi 29 juillet 2006
Statut
Modérateur
Dernière intervention
15 août 2020
825
9 déc. 2006 à 09:37
9 déc. 2006 à 09:37
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
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
29 juin 2007 à 13:45
29 juin 2007 à 13:45
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
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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 !!
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.
<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 !!
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
<? } ?>
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???
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???
pjmag44
Messages postés
1
Date d'inscription
dimanche 23 décembre 2007
Statut
Membre
Dernière intervention
2 septembre 2008
2 sept. 2008 à 19:24
2 sept. 2008 à 19:24
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 ;) )
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 ;) )
cacoun
Messages postés
13
Date d'inscription
jeudi 23 juin 2005
Statut
Membre
Dernière intervention
3 mars 2009
2
1 sept. 2008 à 18:59
1 sept. 2008 à 18:59
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 !!!
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
bon développement !!!! à bientot
bg62
Messages postés
23590
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
15 avril 2024
2 362
2 sept. 2008 à 12:09
2 sept. 2008 à 12:09
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
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
16 mars 2007 à 12:48
16 mars 2007 à 13:23
exemple : http://webfx.eae.net/dhtml/select/jsGenerated.html