liste déroulante qui affiche des images 2

zup17 · 17/02/2011, 16h26

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 :

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','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

Loceka · 17/02/2011, 16h44

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 :

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

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];
}

zup17 · 17/02/2011, 17h05

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 :

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

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

NoSmoking · 17/02/2011, 18h38

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 :

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

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 :

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

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 :

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

1
2
3
function change(vaval, id_destination){
  document.getElementById( id_destination).src = tbvaleur[vaval];
}

Loceka · 17/02/2011, 18h57

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.

mekal · 17/02/2011, 19h45

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 :

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

17/02/2011, 18h57	#5
Loceka Membre Expert Tlouye Ci Inscription : mars 2004 Messages : 1 450 Détails du profil Informations personnelles : Nom : Tlouye Ci Informations forums : Inscription : mars 2004 Messages : 1 450 Points : 2 149 Points : 2 149	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.
	00

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