Liste déroulante avec image qui s'affiche

Version imprimable

16/02/2011, 23h10
zup17

Liste déroulante avec image qui s'affiche
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:

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
16/02/2011, 23h18
ABCIWEB

Ce sujet a été traité dans ce topic ;)

un truc dans ce genre

Code:

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>

Citation:
Envoyé par mekal
un truc dans ce genre
Code:

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

Liste déroulante qui affiche des images

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:

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>

17/02/2011, 10h49
SpaceFrog

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

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:

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>

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:

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>

17/02/2011, 15h07
zup17

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 :ccool:
18/02/2011, 02h06
ABCIWEB

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:

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