Liste déroulante avec image qui s'affiche

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

Invité · 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

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

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>

Invité · 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

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

Liste déroulante avec image qui s'affiche

JavaScript

Discussions similaires

Partager

Partager