div layer

[Michael W.]

gibt es mittels layer die möglichkeit folgendes zu tun:
ich habe eine seite mit 2 layern
klicke ich "layer1" an sehe ich den inhalt des layers 1
klicke ich "Layer2" an sehe ich den inhalt des layers 2

wenn ich erstmal die grundform kenne geht der rest dann wie alleine ;)

[Christoph Schnauß]

hi,

gibt es mittels layer die möglichkeit folgendes zu tun:
ich habe eine seite mit 2 layern
klicke ich "layer1" an sehe ich den inhalt des layers 1
klicke ich "Layer2" an sehe ich den inhalt des layers 2

natürlich gibts sowas. Du notierst im Headerbereich (oder in einer separaten JS-Datei) ungefähr so etwas:

<script language="javascript">

var i = 1;
var schicht = "layer";

var browserName = navigator.appName;
var browserVersion = parseInt(navigator.appVersion);
var isIE = false;
var isNN = false;
var isDOM = false;
var isDomIE = false;
var isDomNN = false;

var isIE = browserName.indexOf("Microsoft Internet Explorer" )==-1?false:true;
var isNN = browserName.indexOf("Netscape")==-1?false:true;
var isDOM = document.getElementById?true:false;
var isDomNN = document.layers?true:false;
var isDomIE = document.all?true:false;

function verbergen(name) {
  if (isDOM) document.getElementById(name).style.visibility="hidden";
  if (isDomIE) document.all[name].style.visibility="hidden";
  if (isDomNN) document.layers[name].visibility="hidden";
}

function zeigen(name) {
  if (isDOM) document.getElementById(name).style.visibility="visible";
  if (isDomIE) document.all[name].style.visibility="visible";
  if (isDomNN) document.layers[name].visibility="visible";
}

function click(num){
verbergen(eval('"' + schicht + i +'"'));
zeigen(eval('"' + schicht + num +'"'));
i = num;
}

</script>

<style type="text/css">
#layer1 {position: absolute; visibility: visible; left: 160px; width: 800px; top: 10px; background-color:#0000FF; layer-background-color:#0000FF;}
#layer2 {position: absolute; visibility: hidden; left: 160px; width: 800px; top: 10px; background-color:#0000FF; layer-background-color:#0000FF;}
#layer3 {position: absolute; visibility: hidden; left: 160px; width: 800px; top: 10px; background-color:#0000FF; layer-background-color:#0000FF;}
#menu {position: absolute; visibility: visible; left: 10px; width: 120px; top: 70px; z-index: 25;}
</style>

und dann brauchst du im Dateikörper nur noch eintragen:

<div ID="layer1">
... Layerinhalt ...
</div>
<div ID="layer2">
... Layerinhalt ...
</div>
<div ID="layer3">
... Layerinhalt ...
</div>
<div ID="menu">
<a HREF="javascript:click(1)" target="_self">Layer1 Inhalt</a><br><br>
<a HREF="javascript:click(2)" target="_self">Layer2 IOnhalt</a><br><br>
<a HREF="javascript:click(3)" target="_self">Layer 3 Inhalt</a><br><br>
</div>

Das funktioniert sogar (fast) browserunabhängig.

Christoph S.