Besoin d'aide : afficher / cacher des layers

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:

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>

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:

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

J'ai un peu cleaner le code...

Cependant je ne me suis pas trop attarder sur les focntions :oops:

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

Merci :lol:

Up ! 8)

appelle deux * ta fonction showLayer!

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

Sorry chief :oops: :lol:

Citation:

Envoyé par SpaceFrog

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

Merci pour ta réponse :wink:

J'ai fais un truc comme ça :

Code:

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

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

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

Citation:

Envoyé par Matthieu2000

appelle deux * ta fonction showLayer!

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

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]);} }
Citation:

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

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

Ca marche nickel :P :P
Un grand merci à toi :lol: :lol:
Citation:
Envoyé par Matthieu2000
rien ne t'interdit defaire des fonctions spéciales...
Code:

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]);} }
Citation:

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

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