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>