Liste déroulante avec image qui s'affiche [Résolu]

zup17 · 16/02/2011, 23h10

Bonjour, je suis débutant en JavaScript et je souhaite faire un formulaire html et dans ce formulaire, j'ai une liste déroulante et quand je sélection un mot je souhaite afficher une image et ainsi de suite pour les autres mots de la liste,
quelqu'un peu m'aider ??? ou me conseiller ???

voila un bout du formulaire ma liste déroulante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<label for="carro">Carrosserie :</label>
    <SELECT name="carro" size="1">
		<OPTION SELECTED>4x2</OPTION>
		<OPTION>6x4</OPTION>
                <OPTION>8x4</OPTION>
    </SELECT>

Et si quelqu'un peu m'expliquer comment faire ??? je vous remercie

ABCIWEB · 16/02/2011, 23h18

Ce sujet a été traité dans ce topic

mekal · 16/02/2011, 23h41

un truc dans ce genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
 
<select onChange="document.getElementById('coucou').src=this.value">
<option value="">Choisissez ! 
</option>
<option value="image1.jpg" selected>>image1</option>
<option value="image2.jpg">image2</option>
<option value="image3.jpg">image3</option>
<option value="image4.jpg">image4</option>
</select> 
 
<img id ='coucou' src ='image1.jpg'>
<br>
</body>
</html>

ABCIWEB · 17/02/2011, 00h10

Citation:

Envoyé par mekal

un truc dans ce genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
 
<select onChange="document.getElementById('coucou').src=this.value">
<option value="">Choisissez ! 
</option>
<option value="image1.jpg" selected>>image1</option>
<option value="image2.jpg">image2</option>
<option value="image3.jpg">image3</option>
<option value="image4.jpg">image4</option>
</select> 
 
<img id ='coucou' src ='image1.jpg'>
<br>
</body>
</html>

Oui mais dans ton exemple tu utilises la valeur des options pour l'adresse des images, ce qui limite beaucoup les possibilités du formulaire.

Dans le lien que j'ai donné plus haut, l'utilisation de la valeur des options pour définir l'adresse des images n'est que partielle, et si besoin dans on peut passer l'adresse des images dans l'id (message de NoSmoking toujours dans le même post). Et pour finir j'ai donné un exemple avec l'utilisation d'une bdd...

Pour dire que sans être exhaustif on a passé pas mal de possibilités en revue

zup17 · 17/02/2011, 10h46

Bonjour,

je souhaite réaliser un formulaire qui à une liste déroulante et qui affiche une image quand on clique sur une rubrique, j'ai trouvé un script qui permet d'afficher du texte quand on clic sur une rubrique d'une liste déroulante, quelqu'un peu m'aider à modifier le script pour qu'il affiche une image par rubrique de ma liste déroulante, je vous remercie beaucoup ??
Car je suis débutant, mille merci.

voila le code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
 
<head>
  <style>
  div { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
 
<body>
  <select name="sweets" >
    <option>Chocolate</option>
    <option selected>Candy</option>
    <option>Taffy</option>
    <option>Caramel</option>
    <option>Fudge</option>
    <option>Cookie</option>
  </select>
 
  <div></div>
<script>
    $("select").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += $(this).text() + " ";
              });
          $("div").text(str);
        })
        .change();
</script>
 
</body>
 
</html>

SpaceFrog · 17/02/2011, 10h49

en passant par jquery qui transforme un ul en liste déroulante c'est possible mais pas avec un select classique

zup17 · 17/02/2011, 11h10

Citation:

Envoyé par SpaceFrog

en passant par jquery qui transforme un ul en liste déroulante c'est possible mais pas avec un select classique

Désolé, je comprend pas ce que tu dit, si tu peux m'aider peut etre par une autre solution, j'ai un formulaire que j'ai mi dans un tableau et dans ce formulaire, j'ai une liste déroulante quand je clique sur une rubrique en dessous je dois avoir une image qui s'affiche, j'ai trouvé un autre code qui correspond,
mais la le problème est que quand je sélectionne une rubrique dans ma liste déroulante l'image apparait mais fais disparaitre ma liste déroulante, moi je souhaite que l'image apparaisse sous ma liste déroulante. quelqu'un peu m'aider à le modifier ??? merci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript">
<!--
function Affiche_img(id_photo,nom_image,num_image)
{
	var id;
 
	if ( (id = document.getElementById(id_photo)))
	{
			if (typeof nom_image != 'undefined') 
				{
					if ( typeof num_image != 'undefined' && num_image != '')
						{
							var source_image = nom_image+num_image+'.jpg';
							//alert(source_image);
							id.src = source_image;	
 
							id.style.display = 'inline';
						}
						else
						{
							id.style.display = 'none';
						}
				}
		}	
}		
-->
</script>
<style type="text/css">
<!--
#formulaire {
position:relative;
width:500px;
margin:auto;
}
#formulaire #photo, #formulaire, #conteneur_photo {
display:none;
}
-->
</style>
</head>
 
<body>
 
<form name="formulaire" id="formulaire" method="post" action="#" >
 
<select class='adsmanager_required' name='category_choose' onchange='Affiche_img("photo","images/rubrique", this.value)'>
    <option>Choisissez une rubrique</option>
    <option value="1">Immobilier</option>
    <option value="2">Auto-moto</option>
    <option value="4">Habitat</option>
    <option value="65">Rencontres</option>
    <option value="92">Le mag</option>
    <option value="151">BIO / ECOLOGIE</option>
    <option value="162">AGRICULTURE</option>
    <option value="173">ECHANGE - TROC</option>
</select>
<img style="position:absolute; right:0; top:0"  id= "photo" src="" />
<div>
<div>
<span id = "conteneur_photo"><img src="images/rubrique1.jpg" /><img src="images/rubrique2.jpg" /><img src="images/rubrique4.jpg" /><img src="images/rubrique65.jpg" /><img src="images/rubrique92.jpg" /><img src="images/rubrique151.jpg" /><img src="images/rubrique162.jpg" /><img src="images/rubrique173.jpg" /></span>
</div>
</div>
</form>
</body>
</html>

mekal · 17/02/2011, 11h48

sinon il y a la solution de cree un tableau avec association de paire que l'on incrementera par l'intemediaire d'une boucle de 2

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
 
var tbvaleur= new Array('fg','image1.jpg','fh','image2.jpg','fi','image3.jpg','fj','image4.jpg');
 
function change(vaval){
for (var i = 0; i < tbvaleur.length; i+=2) {
if (tbvaleur[i]==vaval){
document.getElementById('coucou').src=tbvaleur[i+1];
}
}
}
</script>
</head>
<body>
 
<select onChange=" change(this.value)">
<option value="">Choisissez ! 
</option>
<option value="fg">image1</option>
<option value="fh">image2</option>
<option value="fi">image3</option>
<option value="fj">image4</option>
</select> 
 
<img id ='coucou' src ='d4g.jpg'>
<br>
</body>
</html>

zup17 · 17/02/2011, 15h07

merci, a tous pour vos réponse précise. Vous m'avez apporté une réponse et j'ai réussie à comprendre le fonctionnement.

mille merci

ABCIWEB · 18/02/2011, 02h06

Citation:

Envoyé par zup17

mais la le problème est que quand je sélectionne une rubrique dans ma liste déroulante l'image apparait mais fais disparaitre ma liste déroulante, moi je souhaite que l'image apparaisse sous ma liste déroulante. quelqu'un peu m'aider à le modifier ??? merci

Pour info dans le code que tu avais plus haut, c'est la ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img style="position:absolute; right:0; top:0"  id= "photo" src="" />

qui devait te poser problème. En effet ce positionnement aligne les images en position absolute sur la droite du formulaire, et avec des grandes images il est possible que l'image recouvre le formulaire. C'était donc juste le positionnement de l'image qu'il fallait modifier

16/02/2011, 23h18	#2
ABCIWEB Membre Expert Inscription : septembre 2010 Messages : 1 239 Détails du profil Informations forums : Inscription : septembre 2010 Messages : 1 239 Points : 1 561 Points : 1 561	Ce sujet a été traité dans ce topic __________________ - Réalisations - Interface graphique : génération en javascript d'objets défilants, texte et/ou images, mode horizontal ou vertical.
	00

17/02/2011, 10h49	#6
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	en passant par jquery qui transforme un ul en liste déroulante c'est possible mais pas avec un select classique __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

17/02/2011, 15h07	#9
zup17 Invité de passage Inscription : mars 2008 Messages : 38 Détails du profil Informations forums : Inscription : mars 2008 Messages : 38 Points : 2 Points : 2	merci, a tous pour vos réponse précise. Vous m'avez apporté une réponse et j'ai réussie à comprendre le fonctionnement. mille merci
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email