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.
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>
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.
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.
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.
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>
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.
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.
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.
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>
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) |
© 2005 Impressum