SELFHTML: HTML/XHTML / Layer (Netscape)/ Layer anordnen und kontrollieren

SELFHTML/Navigationshilfen HTML/XHTML Layer (Netscape)
	Layer anordnen und kontrollieren
	Angaben zur Schichtposition mit Layer-Namen Angaben zur Schichtposition mit Indexnummern Layer verstecken und anzeigen

Angaben zur Schichtposition mit Layer-Namen

Wenn Sie mehrere Layer in einer HTML-Datei definieren, deren Anzeigebereiche sich überlappen, werden die Layer normalerweise in der Reihenfolge übereinander angezeigt, in der sie definiert werden. Sie können jedoch die Reihenfolge ändern und angeben, welcher andere Layer unmittelbar über oder unter dem aktuellen Layer liegen soll. Auf diese Weise können Sie das Überdecken von Layern kontrollieren. Voraussetzung ist, dass Sie für jeden Layer einen Namen vergeben.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Angaben zur Schichtposition mit Layer-Namen</title>
</head>
<body>

<layer name="erster" top="0" left="0" width="300" height="200" bgcolor="FFFF99">
  <h1>ERSTER</h1>
</layer>

<layer name="zweiter" top="50" left="100" width="300" height="200" bgcolor="99FF99">
  <h1>ZWEITER</h1>
</layer>

<layer name="dritter" above="zweiter" top="100" left="200" width="300" height="200" bgcolor="9999FF">
  <h1>DRITTER</h1>
</layer>

<layer name="vierter" below="erster" top="150" left="300" width="300" height="200" bgcolor="FF99FF">
  <h1>VIERTER</h1>
</layer>

</body>
</html>

Erläuterung:

Mit dem Attribut above im einleitenden <layer>- oder <ilayer>-Tag können Sie bestimmen, dass ein zuvor definierter, benannter Layer unmittelbar über dem aktuellen Layer liegt (above = oberhalb). Das heißt, der aktuelle Layer soll bei Überschneidung von dem genannten Layer überdeckt werden.
Mit dem Attribut below im einleitenden <layer>- oder <ilayer>-Tag können Sie bestimmen, dass ein zuvor definierter, benannter Layer unmittelbar unter dem aktuellen Layer liegt (below = unterhalb). Das heißt, der aktuelle Layer soll bei Überschneidung den genannten Layer überdecken.
Die Layer-Namen hinter above und below sollten in Anführungszeichen stehen.

Beachten Sie:

Bei above und below dürfen Sie nur Namen von Layern angeben, die in der Datei bereits zuvor definiert wurden. Die Angabe von Layern, die erst nach dem aktuellen Layer definiert werden, kann zu Anzeigefehlern führen. Im ersten definierten Layer einer HTML-Datei sollten deshalb keine Angaben zu above oder below vorkommen.

Es ist nur je eine Angabe für above und below bei der Definition eines Layers erlaubt. Denn mit diesen Angaben legen Sie immer nur fest, welcher andere Layer direkt unter oder über dem aktuellen Layer.

Angaben zur Schichtposition mit Indexnummern

Wenn Sie mehrere Layer in einer HTML-Datei definieren, deren Anzeigebereiche sich überlappen, werden die Layer normalerweise in der Reihenfolge übereinander angezeigt, in der sie definiert werden. Sie können die Reihenfolge ändern, indem Sie für die einzelnen Layer Nummern vergeben. Layer mit höherer Nummer überdecken Layer mit niedrigerer Nummer.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Angaben zur Schichtposition mit Indexnummern</title>
</head>
<body>

<layer z-index="3" top="0" left="0" width="300" height="200" bgcolor="FFFF99">
  <h1>ERSTER</h1>
</layer>

<layer z-index="1" top="50" left="100" width="300" height="200" bgcolor="99FF99">
  <h1>ZWEITER</h1>
</layer>

<layer z-index="4" top="100" left="200" width="300" height="200" bgcolor="9999FF">
  <h1>DRITTER</h1>
</layer>

<layer z-index="2" top="150" left="300" width="300" height="200" bgcolor="FF99FF">
  <h1>VIERTER</h1>
</layer>

</body>
</html>

Erläuterung:

Mit dem Attribut z-index im einleitenden <layer>- oder <ilayer>-Tag bestimmen Sie die Reihenfolge der Layer bei Überlappungen (z-index = Reihenfolge). Geben Sie bei jedem definierten Layer z-index und dahinter eine Nummer an. Der Layer mit der höchsten Nummer überdeckt alle anderen. Der Layer mit der niedrigsten Nummer wird von allen anderen überdeckt.

Beachten Sie:

Bei den Angaben zu z-index sind auch negative Werte erlaubt. Dadurch bewirken Sie bei verschachtelten Layern, dass Layer, die innerhalb eines anderen Layers definiert werden, von ihren Eltern-Layern überdeckt werden. Bei positiven Zahlen ist dies umgekehrt.

Layer verstecken und anzeigen

Sie können bei der Definition von Layern festlegen, ob diese zunächst angezeigt werden sollen oder nicht. Das ist von Bedeutung, wenn Sie die Anzeige der Layer mit Hilfe von JavaScript dynamisch ein-/ausschalten wollen.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Layer verstecken und anzeigen</title>
<script type="text/javascript">
function hideLayer (nr) {
  document.layers[nr].visibility = "hide";
}

function showLayer (nr) {
  document.layers[nr].visibility = "show";
}
</script>
</head>
<body>

<layer top="10" left="10" bgcolor="#DDFFDD">
  <p><a href="javascript:showLayer(1)"><b>Anderen Layer anzeigen</b></a><br>
  (dazu wird ein einfaches JavaScript eingesetzt)</p>
</layer>

<layer top="60" left="60" bgcolor="#CCEEFF" visibility="hide">
  <p><a href="javascript:hideLayer(1)"><b>Diesen Layer verstecken</b></a><br>
  (dazu wird ein einfaches JavaScript eingesetzt)</p>
</layer>

</body>
</html>

Erläuterung:

Mit dem Attribut visibility im einleitenden <layer>- oder <ilayer>-Tag können Sie die Anzeige des Layers explizit erzwingen oder verhindern (visibility = Sichtbarkeit).
Mit visibility="show" legen Sie fest, dass der Layer in jedem Fall angezeigt wird (show = zeigen).
Mit visibility="hide" legen Sie fest, dass der Layer nicht angezeigt, also versteckt wird (hide = verstecken).
Mit visibility="inherit" legen Sie fest, dass der Layer nur dann angezeigt wird, wenn sein Elternelement ebenfalls angezeigt wird (inherit = erben). Diese Angabe ist nur bei inneren Layern in verschachtelten Layern von Bedeutung.

Das obige Beispiel zeigt, wozu das Verstecken von Layern gut ist: erst mit Hilfe von JavaScript wird dieses Attribut verständlich.


	Stylesheet-Bereiche in HTML
	Layer definieren und positionieren

SELFHTML/Navigationshilfen HTML/XHTML Layer (Netscape)