Comment afficher 2 calques à la fois ?

**barracuda83** · 03/07/2006, 17h25

Bonjour,

J'ai un script censé me permettre d'afficher deux calques (ou layers) issus chacun de deux listes déroulante différentes.

Mon probleme est le suivant: quand j'affiche un premier calque avec la premiere liste déroulante il disparait quand j'affiche un deuxieme calque avec l'autre liste déroulante. Autrement dit le script ne peut afficher qu'un seul calque à la fois. Or moi je veux qu'il puissent en afficher deux à la fois (l'un à la suite de l'autre, sans que l'un des deux disparaisse).

Pouvez-vous m'aidez? C'est un problème tout bête mais je ne trouve la solution nulle part.

Merci d'avance.

Voici mon script: vous constaterez par vous même qu'on ne peut pas afficher deux calques en même temps

. Quand on affiche un autre calque avec l'autre menu deroulant, le précédent disparait comme si la page s'était raffraichie.

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
 
var encours="";
function AffLayer1(liste) {
	var nomlayer=liste.options[liste.selectedIndex].value;
	if (document.all) {
		if (encours!="") {document.all[encours].style.visibility="hidden";}
		encours=nomlayer;
		if (nomlayer!="") {document.all[encours].style.visibility="visible";}
	}
	if (document.layers) {
	  	if (encours!="") {document.layers[encours].visibility="hide";}
		encours=nomlayer;
		if (nomlayer!="") {document.layers[encours].visibility="show";}
	}
	if (document.getElementById) {
		if (encours!="") {document.getElementById(encours).style.visibility="hidden";}
		encours=nomlayer;
		if (nomlayer!="") {document.getElementById(encours).style.visibility="visible";}
	}
}
 
</SCRIPT>
 
<SCRIPT LANGUAGE="JavaScript">
 
var encours="";
function AffLayer2(liste) {
	var nomlayer=liste.options[liste.selectedIndex].value;
	if (document.all) {
		if (encours!="") {document.all[encours].style.visibility="hidden";}
		encours=nomlayer;
		if (nomlayer!="") {document.all[encours].style.visibility="visible";}
	}
	if (document.layers) {
	  	if (encours!="") {document.layers[encours].visibility="hide";}
		encours=nomlayer;
		if (nomlayer!="") {document.layers[encours].visibility="show";}
	}
	if (document.getElementById) {
		if (encours!="") {document.getElementById(encours).style.visibility="hidden";}
		encours=nomlayer;
		if (nomlayer!="") {document.getElementById(encours).style.visibility="visible";}
	}
}
 
</SCRIPT>
 
</HEAD>
 
<BODY>
 
<FORM>
<SELECT NAME="liste" onChange='AffLayer1(this)'>
	<option value="">Choisir un calque</option>
	<option value="layer1">Voiture</option>
	<option value="layer2">Animaux</option>
	<option value="layer3">Maison</option>
</SELECT>
 
</FORM>
 
<DIV id="layer1" style="position:absolute;left:200px;top:100px;z-index:0;visibility:hidden">
  Voiture
</DIV>
 
<DIV id="layer2" style="position:absolute;left:500px;top:300px;z-index:0;visibility:hidden">
  Animaux
</DIV>
 
<DIV id="layer3" style="position:absolute;left:700px;top:400px;z-index:0;visibility:hidden">
  Maison
</DIV>
 
 
<FORM>
<SELECT NAME="liste" onChange='AffLayer2(this)'>
	<option value="">Choisir un calque</option>
	<option value="layer4">nettoyage</option>
	<option value="layer5">travail</option>
	<option value="layer6">informatique</option>
</SELECT>
 
</FORM>
 
<DIV id="layer4" style="position:absolute;left:300px;top:600px;z-index:1;visibility:hidden">
  Nettoyage
</DIV>
 
<DIV id="layer5" style="position:absolute;left:200px;top:500px;z-index:1;visibility:hidden">
  Travail
</DIV>
 
<DIV id="layer6" style="position:absolute;left:450px;top:550px;z-index:1;visibility:hidden">
  Informatique
</DIV>
 
 
</BODY></HTML>

**gerald2545** · 03/07/2006, 17h30

pourquoi ne fais-tu pas une seule fonction javascipt (ne prenant pas d'argument) qui va récupérer l'entrée de la liste 1 et l'entrée de la liste 2 puis en fonction affichera ou non tes 2 layers?

**barracuda83** · 04/07/2006, 09h59

Ok je n'ai mis qu'une seule fonction javascript, mais je ne vois pas comment faire pour ne pas mettre d'argument dans cette fonction

, j'aurais besoin d'aide pour ça:

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
<SCRIPT LANGUAGE="JavaScript">
 
var encours="";
function AffLayer(liste) {
	var nomlayer=liste.options[liste.selectedIndex].value;
	if (document.all) {
		if (encours!="") {document.all[encours].style.visibility="hidden";}
		encours=nomlayer;
		if (nomlayer!="") {document.all[encours].style.visibility="visible";}
	}
	if (document.layers) {
	  	if (encours!="") {document.layers[encours].visibility="hide";}
		encours=nomlayer;
		if (nomlayer!="") {document.layers[encours].visibility="show";}
	}
	if (document.getElementById) {
		if (encours!="") {document.getElementById(encours).style.visibility="hidden";}
		encours=nomlayer;
		if (nomlayer!="") {document.getElementById(encours).style.visibility="visible";}
	}
}
 
</SCRIPT>

**gerald2545** · 04/07/2006, 11h16

Pour commencer, met un attribut id pour tes listes de sélection (l'attribut name doit convenir aussi cependant) avec un nom différent pour chaque liste :

Code :

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

1
2
3
4
5
6
7
 
<SELECT id="liste1" onChange='AffLayer()'>
	<option value="">....</option>
</SELECT>
<SELECT id="liste2" onChange='AffLayer()'>
	<option value="">....</option>
</SELECT>

Code :

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

1
2
3
4
5
6
7
8
9
<SCRIPT LANGUAGE="JavaScript">
 
var encours="";
function AffLayer() {
	var nomlayer1=liste1.options[liste.selectedIndex].value;
        var nomlayer2=liste2.options[liste.selectedIndex].value;
	--- test traitements en fonction de ce que tu veux afficher ---
}
</SCRIPT>

liste1 et liste2 étant les noms de tes listes de sélection.
je ne sais pas si ce code fonctionne, mais c'est pour te donner une idée de la façon dont je procèderais....

PS : je ne comprends pas bien la fonction de la variable encours?, tu peux m'éclairer STP
merci

**barracuda83** · 04/07/2006, 16h10

J'ai fais comme tu m'a dit, j'ai mis un attribut ID différent pour chaque liste (en prenant soin de modifier pareil les attributs dans la partie javascript...). Mais ça ne marche plus tout

. Plus aucun calque n'apparait.

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<HTML>
<HEAD>
 
 
<SCRIPT LANGUAGE="JavaScript">
 
var encours="";
function AffLayer() {
	var nomlayer1=liste1.options[liste1.selectedIndex].value;
	var nomlayer2=liste2.options[liste2.selectedIndex].value;
 
if (document.all) {
		if  {document.all[encours].style.visibility="hidden";}
		encours=nomlayer1;
		if (nomlayer1!="") {document.all[encours].style.visibility="visible";}
	}
	if (document.layers) {
	  	if (encours!="") {document.layers[encours].visibility="hide";}
		encours=nomlayer1;
		if (nomlayer1!="") {document.layers[encours].visibility="show";}
	}
	if (document.getElementById) {
		if (encours!="") {document.getElementById(encours).style.visibility="hidden";}
		encours=nomlayer1;
		if (nomlayer1!="") {document.getElementById(encours).style.visibility="visible";}
	}
if (document.all) {
		if  {document.all[encours].style.visibility="hidden";}
		encours=nomlayer2;
		if (nomlayer2!="") {document.all[encours].style.visibility="visible";}
	}
	if (document.layers) {
	  	if (encours!="") {document.layers[encours].visibility="hide";}
		encours=nomlayer2;
		if (nomlayer2!="") {document.layers[encours].visibility="show";}
	}
	if (document.getElementById) {
		if (encours!="") {document.getElementById(encours).style.visibility="hidden";}
		encours=nomlayer2;
		if (nomlayer2!="") {document.getElementById(encours).style.visibility="visible";}
	}
}
 
</SCRIPT>
 
</HEAD>
 
<BODY>
 
<FORM>
<SELECT NAME="liste1" onChange='AffLayer(this)'>
	<option value="">Choisir un calque</option>
	<option value="layer1">Voiture</option>
	<option value="layer2">Animaux</option>
	<option value="layer3">Maison</option>
</SELECT>
 
</FORM>
 
<DIV id="layer1" style="position:absolute;left:200px;top:100px;z-index:0;visibility:hidden">
  Voiture
</DIV>
 
<DIV id="layer2" style="position:absolute;left:500px;top:300px;z-index:0;visibility:hidden">
  Animaux
</DIV>
 
<DIV id="layer3" style="position:absolute;left:700px;top:400px;z-index:0;visibility:hidden">
  Maison
</DIV>
 
 
<FORM>
<SELECT NAME="liste2" onChange='AffLayer(this)'>
	<option value="">Choisir un calque</option>
	<option value="layer4">nettoyage</option>
	<option value="layer5">travail</option>
	<option value="layer6">informatique</option>
</SELECT>
 
</FORM>
 
<DIV id="layer4" style="position:absolute;left:300px;top:600px;z-index:1;visibility:hidden">
  Nettoyage
</DIV>
 
<DIV id="layer5" style="position:absolute;left:200px;top:500px;z-index:1;visibility:hidden">
  Travail
</DIV>
 
<DIV id="layer6" style="position:absolute;left:450px;top:550px;z-index:1;visibility:hidden">
  Informatique
</DIV>
 
 
</BODY></HTML>

Quand à la fonction "encours" je me suis aussi posé la question à quoi ça peut servir. Malheureusement je ne suis pas assez specialiste pour savoir à quoi elle sert. Tout ce que je sais ce que lorsqu' on essaye de l'enlever, plus rien ne marche.

**gerald2545** · 04/07/2006, 18h28

dsl je suis pressé, je t'ai fait un truc tout pourri, mais qui fonctionne chez moi (firefox 1.5 sous linux), devrait passer sur IE aussi :

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
<HTML>
<HEAD>
 
 
<script type="text/javascript">
function afflayer (){
var nomlayer1=document.getElementById('liste1').options[document.getElementById('liste1').options.selectedIndex].value;
var nomlayer2=document.getElementById('liste2').options[document.getElementById('liste2').options.selectedIndex].value;
var nom = 'layer';
for (var i = 1;i<7;i++)
{
var nomi = nom+i;
document.getElementById(nomi).style.visibility="hidden";
}
if (document.getElementById) {
if(document.getElementById('liste1').options.selectedIndex > 0)
{
    document.getElementById(nomlayer1).style.visibility="visible";
}
if (document.getElementById('liste2').options.selectedIndex > 0)
{
    document.getElementById(nomlayer2).style.visibility="visible";
}
 
}
}
</script>
</HEAD>
<BODY>
<FORM name="dje">
<SELECT id="liste1" onChange='afflayer();'>
<option value="">Choisir un calque</option>
<option value="layer1">Voiture</option>
<option value="layer2">Animaux</option>
<option value="layer3">Maison</option>
</SELECT>
 
 
<DIV id="layer1" style="position:absolute;left:200px;top:100px;z-index:0;visibility:hidden">
Voiture
</DIV>
<DIV id="layer2" style="position:absolute;left:500px;top:300px;z-index:0;visibility:hidden">
Animaux
</DIV>
<DIV id="layer3" style="position:absolute;left:700px;top:400px;z-index:0;visibility:hidden">
Maison
</DIV>
 
 
<SELECT id="liste2" onChange='afflayer()'>
<option value="">Choisir un calque</option>
<option value="layer4">nettoyage</option>
<option value="layer5">travail</option>
<option value="layer6">informatique</option>
</SELECT>
</FORM>
<DIV id="layer4" style="position:absolute;left:300px;top:600px;z-index:1;visibility:hidden">
Nettoyage
</DIV>
<DIV id="layer5" style="position:absolute;left:200px;top:500px;z-index:1;visibility:hidden">
Travail
</DIV>
<DIV id="layer6" style="position:absolute;left:450px;top:550px;z-index:1;visibility:hidden">
Informatique
</DIV>
 
</BODY></HTML>

**barracuda83** · 05/07/2006, 14h34

Excellent! merci beaucoup!

.Ca marche parfaitement et c'est exactement ce que je voulais. Mais j'ai encore un petit problème

: lorsque je rajoute une troisième liste déroulante, et bien ça fait un BUG: En fait quand je selectionne un layer avec cette troisième liste il reste à l'ecran quand j'en sélectionne un autre (dans la même liste). J'ai regardé partout dans le code mais je vois pas d'où vient l'erreur. Est ce que tu sais ce qui cloche?

Tiens, voila le code tel que je l'ai modifié en ajoutant une troisième liste:

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<HTML>
<HEAD>
 
 
<script type="text/javascript">
function afflayer (){
var nomlayer1=document.getElementById('liste1').options[document.getElementById('liste1').options.selectedIndex].value;
var nomlayer2=document.getElementById('liste2').options[document.getElementById('liste2').options.selectedIndex].value;
var nomlayer3=document.getElementById('liste3').options[document.getElementById('liste3').options.selectedIndex].value;
var nom = 'layer';
for (var i = 1;i<7;i++)
{
var nomi = nom+i;
document.getElementById(nomi).style.visibility="hidden";
}
if (document.getElementById) {
if(document.getElementById('liste1').options.selectedIndex > 0)
{
    document.getElementById(nomlayer1).style.visibility="visible";
}
if (document.getElementById('liste2').options.selectedIndex > 0)
{
    document.getElementById(nomlayer2).style.visibility="visible";
}
if (document.getElementById('liste3').options.selectedIndex > 0)
{
    document.getElementById(nomlayer3).style.visibility="visible";
}
 
}
}
</script>
</HEAD>
<BODY>
<FORM name="dje">
 
<SELECT id="liste1" onChange='afflayer();'>
<option value="">Choisir un calque</option>
<option value="layer1">Voiture</option>
<option value="layer2">Animaux</option>
<option value="layer3">Maison</option>
</SELECT>
 
 
<DIV id="layer1" style="position:absolute;left:200px;top:100px;z-index:0;visibility:hidden">
Voiture
</DIV>
<DIV id="layer2" style="position:absolute;left:500px;top:300px;z-index:0;visibility:hidden">
Animaux
</DIV>
<DIV id="layer3" style="position:absolute;left:700px;top:400px;z-index:0;visibility:hidden">
Maison
</DIV>
 
 
<SELECT id="liste2" onChange='afflayer()'>
<option value="">Choisir un calque</option>
<option value="layer4">nettoyage</option>
<option value="layer5">travail</option>
<option value="layer6">informatique</option>
</SELECT>
 
<DIV id="layer4" style="position:absolute;left:300px;top:600px;z-index:1;visibility:hidden">
Nettoyage
</DIV>
<DIV id="layer5" style="position:absolute;left:200px;top:500px;z-index:1;visibility:hidden">
Travail
</DIV>
<DIV id="layer6" style="position:absolute;left:450px;top:550px;z-index:1;visibility:hidden">
Informatique
</DIV>
 
<SELECT id="liste3" onChange='afflayer()'>
<option value="">Choisir un calque</option>
<option value="layer7">Travaux</option>
<option value="layer8">Calculatrice</option>
<option value="layer9">Commerce</option>
</SELECT>
 
</FORM>
 
<DIV id="layer7" style="position:absolute;left:750px;top:220px;z-index:2;visibility:hidden">
Travaux
</DIV>
<DIV id="layer8" style="position:absolute;left:810px;top:600px;z-index:2;visibility:hidden">
Calculatrice
</DIV>
<DIV id="layer9" style="position:absolute;left:490px;top:370px;z-index:2;visibility:hidden">
Commerce
</DIV>
 
</BODY></HTML>

**gerald2545** · 05/07/2006, 14h55

quand je t'ai dit que j'avais fait un truc pourri

, je pensais notamment à ça.
le problème viens de ce code

Code :

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

1
2
3
4
5
6
 
for (var i = 1;i<7;i++)
{
var nomi = nom+i;
document.getElementById(nomi).style.visibility="hidden";
}

il suppose que ta page ne contient que 6 objets ayant leur nom commençant par layer.
Donc forcément si tu en rajoutes, ça ne marche plus

ce qu'il faudrait, c'est commencer par compter le nombre d'objets de ton formulaire dont le nom commence par layer puis faire la même boucle que précédemment mais au lieu de mettre 7 tu mets le nombre de layer trouvés + 1 (en supposant que tu as nommé tous tes layers de la même façon avec le suffixe numérique continu de 1 à x)...

**barracuda83** · 05/07/2006, 16h41

D'accord je comprends mieux maintenant. Je viens de rajouter +1 au nombre total de layers (soit 10) et là ça marche nickel

. Encore merci à toi! Je commençait à désespérer de trouver une solution.

Comment afficher 2 calques à la fois ?

JavaScript

Discussions similaires

Partager

Partager