SELFHTML Forum  SELFHTML Forumsarchiv  2002  Januar

	SELFHTML Forumsarchiv div layer
	(DESIGN) div layer von Michael W., 31. 01. 2002, 18:19  (DESIGN) div layer von Christoph Schnauß, 31. 01. 2002, 23:56

div layer

Die folgende Nachricht zum Thema stammt von: Michael W., 31. 01. 2002, 18:19

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

div layer

Die folgende Nachricht zum Thema stammt von: Christoph Schnauß, 31. 01. 2002, 23:56

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.

 SELFHTML Forum  SELFHTML Forumsarchiv  2002  Januar

© 1998-2008  Impressum, Software: Classic Forum