liste déroulante qui affiche des images 2

Version imprimable

Bonjour,

j'ai poster un message sur le forum pour pouvoir trouver script java script, qui me permet de mettre dans mon formulaire une liste déroulante avec des rubriques qui me permet d'afficher une image quand je clique sur la rubrique, jusque la tout fonctionne, sauf que j'ai d'autre liste déroulante dans le même formulaire qui doivent faire la même chose, mais j'ai essayé de repéter le script et la, la premier liste déroulante ne fonctionne plus au niveau affichage d'image, et la deuxième liste déroulante fonctionne, je suis débutant en java script, je pense que de mettre deux fois le script doit faire un conflit ???
Car j'ai besoin de ce script pour quatre liste déroulante différente et qui les affiche les images sous les liste déroulante correspondante.

voila le code pour une liste déroulante :

comment je dois faire pour l'utiliser pour d'autre liste déroulante sans conflit
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','images/image1.jpg','fh','images/image2.jpg','fi','images/image3.jpg','fj','images/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>
je vous remercie de votre aide :ccool:

Tu peux poster le code que tu fais quand tu mets les 2 listes ?

Sinon ton code peut être grandement simplifié en utilisant un tableau associatif :
Code:

1 2 3 4 5 6 7 8 9 10 var tbvaleur= { 'fg' : 'images/image1.jpg', 'fh' : 'images/image2.jpg', 'fi' : 'images/image3.jpg', 'fj' : 'images/image4.jpg' }; function change(vaval){ document.getElementById('coucou').src=tbvaleur[vaval]; }

Citation:
Envoyé par Loceka
Tu peux poster le code que tu fais quand tu mets les 2 listes ?

Sinon ton code peut être grandement simplifié en utilisant un tableau associatif :
Code:

1 2 3 4 5 6 7 8 9 10 var tbvaleur= { 'fg' : 'images/image1.jpg', 'fh' : 'images/image2.jpg', 'fi' : 'images/image3.jpg', 'fj' : 'images/image4.jpg' }; function change(vaval){ document.getElementById('coucou').src=tbvaleur[vaval]; }
Loceka, en faites comme je suis débutant je pensais quand répétant le script ca marché, mais non ca rentre en conflit peux tu me dire comment faire pour que ca fonction pareil pour 4 liste déroulante différentes

17/02/2011, 18h38
NoSmoking
Citation:

je pense que de mettre deux fois le script doit faire un conflit ???

il ne rentre pas en conflit mais si tu ne changes pas l'élément auquel tu veux appliquer la modification cela sera toujours le même qui sera modifié
Code:

1 2 3 4 5 6 7 function change(vaval){ for (var i = 0; i < tbvaleur.length; i+=2) { if (tbvaleur[i]==vaval){ document.getElementById('coucou').src=tbvaleur[i+1]; } } }
dans ton code ce sera toujours

Code:

document.getElementById('coucou')

qui sera modifié, il faut passer à ta fonction la référence à l'objet, en reprenant le code de Loceka cela donne
Code:

1 2 3 function change(vaval, id_destination){ document.getElementById( id_destination).src = tbvaleur[vaval]; }
17/02/2011, 18h57
Loceka

Le plus simple serait quand même que tu postes le code que tu as essayé de faire pour qu'on te dise où ça ne va pas et comment le corriger.

en considerant que chaque select a sa propre zone d'affichage il faut mettre un parametre suplementaire qui correspondra a l'id de la zone ou se trouve l'image

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
<!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= {
  'fg' : 'images/image1.jpg',
  'fh' : 'images/image2.jpg',
  'fi' : 'images/image3.jpg',
  'fj' : 'images/image4.jpg'
};
 
function change(vaval,element){
  document.getElementById(element).src=tbvaleur[vaval];
}
</script>
</head>
<body>
 
<select onChange=" change(this.value,'coucou1')">
<option value="">Choisissez ! 
</option>
<option value="fg">image1</option>
<option value="fh">image2</option>
</select> 
 
<img id ='coucou1' src ='d4g.jpg'>
<br>

<select onChange=" change(this.value,'coucou2')">
<option value="">Choisissez ! 
</option>
<option value="fi">image1</option>
<option value="fj">image2</option>
</select> 
 
<img id ='coucou2' src ='d4g.jpg'>
<br>
</body>
</html>