Besoin d'aide : afficher / cacher des layers

**mickeliette** · 18/10/2004, 17h59

Bonjour à tous

Voici js qui permet de d'afficher/cacher des layers.
Je voudrai savoir s'il est possible d'afficher 2 layers en même temps.
Par exemple en cliquant sur -| Layer 1 |- je voudrai afficher les layers 1 et 2

Merci pour votre aide

Voici 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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Showing and Hiding Layers</title>
<STYLE TYPE="text/css">
body {font-family: Verdana, arial, helvetica, sans-serif; font-size:11px; margin:20px; padding:0;}
h2	{font-size:12px;}
 
#lay1 {position:absolute; visibility:hidden; left:20px; top:60px; width:305px; z-index:100; border: 1px dashed black; padding: 20px;}
#lay2 {position:absolute; visibility:hidden; left:20px; top:500px; width:305px; z-index:100; border: 1px dashed lime; padding: 20px;}
#lay3 {position:absolute; visibility:hidden; left:20px; top:60px; width:305px; z-index:100; border: 1px dashed pink; padding: 20px;}
#lay4 {position:absolute; visibility:hidden; left:20px; top:60px; width:305px; z-index:100; border: 1px dashed orange; padding: 20px;}
</STYLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
// onresize for ns4
var origWidth, origHeight;
if (document.layers) {
	origWidth = window.innerWidth; origHeight = window.innerHeight;
	window.onresize = function() { 
		if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0);
		}
}
 
var layer_encour;	// ID du layer visible en cour
 
function swapLayers(id) {
  if (layer_encour) hideLayer(layer_encour);
  showLayer(id);
  layer_encour = id;
  //alert(id);
}
 
function showLayer(id) {
  var layer = getElemRefs(id);
  if (layer && layer.css) layer.css.visibility = "visible";
  //alert(id);
}
 
function hideLayer(id) {
  var layer = getElemRefs(id);
  if (layer && layer.css) layer.css.visibility = "hidden";
  //alert(id);
}
 
function getElemRefs(id) {
	var elmt = (document.getElementById)? document.getElementById(id): (document.all)? document.all[id]: (document.layers)? document.layers[id]: null;
	if (elmt) elmt.css = (elmt.style)? elmt.style: elmt;
	return elmt;
}
</SCRIPT>
</head>
<body onload="swapLayers('lay1');">
 
	<a href="#" onClick="swapLayers('lay1'); return false" STYLE="color: black;">-| Layer 1 |-</a>
	&nbsp;|&nbsp;
	<a href="#" onClick="swapLayers('lay2'); return false" STYLE="color: lime;">-| Layer 2 |-</a>
	&nbsp;|&nbsp;
	<a href="#" onClick="swapLayers('lay3'); return false" STYLE="color: pink;">-| Layer 3 |-</a>
	&nbsp;|&nbsp;
	<a href="#" onClick="swapLayers('lay4'); return false" STYLE="color: orange;">-| Layer 4 |-</a>
 
<div id="lay1">
	<h2 STYLE="color: black;">- Layer 1 -</h2>
 
	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<BR><BR>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
 
<div id="lay2">
	<h2 STYLE="color: lime;">- Layer 2 -</h2>
 
	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
 
<div id="lay3">
	<h2 STYLE="color: pink;">- Layer 3 -</h2>
 
	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<BR><BR>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<BR><BR>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
 
<div id="lay4">
	<h2 STYLE="color: orange;">- Layer 4 -</h2>
 
	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<BR><BR>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
 
</body>
</html>

**Johnbob** · 18/10/2004, 18h08

Merci d'écrire un titre un peu plus explicite...
Et de te pencher un peu sur le code (surtout quand le code en question est plutôt bien écrit) !

Si tu regardes bien tu as deux fonctions "showLayer" et "hideLayer"
Il faudrait dans ton cas leur passer 2 ids de layer au lieu d'un seul ou alors d'appeller 2 fois la fonction avec un id différent à chaque fois...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function showLayer(id) {
  var layer = getElemRefs(id);
  if (layer && layer.css) layer.css.visibility = "visible";
  //alert(id);
}
 
function hideLayer(id) {
  var layer = getElemRefs(id);
  if (layer && layer.css) layer.css.visibility = "hidden";
  //alert(id);
}

**mickeliette** · 18/10/2004, 18h12

J'ai un peu cleaner le code...

Cependant je ne me suis pas trop attarder sur les focntions

Peux-tu développer tes 2 idées s'il te plaît ?

Merci

**mickeliette** · 20/10/2004, 18h03

Up ! 8)

**Matthieu2000** · 21/10/2004, 09h09

appelle deux * ta fonction showLayer!

**SpaceFrog** · 21/10/2004, 09h33

Merci d'éviter les up à l'avenir...
Je sais que ça se fait sur d'autres forums ...

Ici on évite ...

**mickeliette** · 21/10/2004, 09h34

Sorry chief

Envoyé par SpaceFrog

Merci d'éviter les up à l'avenir...
Je sais que ça se fait sur d'autres forums ...

Ici on évite ...

**mickeliette** · 21/10/2004, 09h36

Merci pour ta réponse

J'ai fais un truc comme ça :

Code :

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

<a href="#" onClick="swapLayers('lay1');showLayer('lay2'); return false" STYLE="color: black;">-| Layer 1 |-</a>

Ca ne va pas être très pratique quand je vais devoir masquer les layers 1 et 2 en cliquant sur les liens Layer 2, 3 et 4...

Code :

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

<a href="#" onClick="swapLayers('lay3');hideLayer('lay2'); return false" STYLE="color: pink;">-| Layer 3 |-</a>

Si j'avais affiché 3 layers en cliquant sur le lien Layer 1, il faudrait que je fasse comme ça :

Code :

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

<a href="#" onClick="swapLayers('lay4');hideLayer('lay2');hideLayer('lay3'); return false" STYLE="color: orange;">-| Layer 4 |-</a>

Envoyé par Matthieu2000

appelle deux * ta fonction showLayer!

**Matthieu2000** · 21/10/2004, 10h52

rien ne t'interdit defaire des fonctions spéciales...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
function showListLayer() { 
var totalLayer=4;
var args=showListLayer.arguments;
//tout cacher
for(i=1;i<=totalLayer;i++)
{hideLayer('lay'+i);}
//montrer 
for(i=0;i<args.length;i++)
{showLayer(args[i]);}
 
}

<a href="#" onClick="showListLayer('lay1','lay2');" STYLE="color: black;">-| Layer 1 |-</a>

...<a href="#" onClick="showListLayer('lay3');" STYLE="color: pink;">-| Layer 3 |-</a>
...

**mickeliette** · 21/10/2004, 11h03

Ca marche nickel

Un grand merci à toi

Envoyé par Matthieu2000

rien ne t'interdit defaire des fonctions spéciales...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
function showListLayer() { 
var totalLayer=4;
var args=showListLayer.arguments;
//tout cacher
for(i=1;i<=totalLayer;i++)
{hideLayer('lay'+i);}
//montrer 
for(i=0;i<args.length;i++)
{showLayer(args[i]);}
 
}

<a href="#" onClick="showListLayer('lay1','lay2');" STYLE="color: black;">-| Layer 1 |-</a>

...<a href="#" onClick="showListLayer('lay3');" STYLE="color: pink;">-| Layer 3 |-</a>
...

Besoin d'aide : afficher / cacher des layers

JavaScript

Discussions similaires

Partager

Partager