Layer-Verwaltung mit layers[]

Layer sind von Netscape zur Ergänzung von HTML zu DHTML entwickelt worden. Leider funktionieren sie nur in den Netscape-Browsern vor Nummer 6. Die vorhandene Übersicht zu Layern in HTML soll hier um die JavaScript-Möglichkeiten ergänzt werden. Für diese gilt natürlich die gleiche Beschränkung auf ältere Netscape-Browser. JavaScript enthält ein Array layers[], über das der Zugriff auf Layer realisiert wird. Es folgt eine tabellarische Übersicht der Möglichkeiten.

Mit den Groß-Browsern der Nummern 5 und größer gibt es für den Zugriff auf HTML-Tags neue Möglichkeiten, die im Zusammenhang mit der Grafik-Ausgabe besprochen worden sind. Trotzdem muß ggf. für die älteren Netscape-User der Layer-Zugriff mit vorgesehen werden.

Methoden und Eigenschaften von "layers"

Das Array "layers" ist in Javascript Bestandteil von document. Bei Anlage von Layern mit dem layer oder ilayer-Tag legt JavaScript eine Übersicht layers[num] an und adressiert sie mit 0 beginnend. Gleichzeitig erhalten Layer üblicherweise im definierenden Tag einen Namen (name-Eigenschaft). Über beide, Zählung wie Benennung sind sie in JavaScript ansprechbar.

document.layers[num].Eigenschaft=wert
dummy=document.layers[num].Methode()
document.layerName.Eigenschaft=wert
dummy=document.layers[num].Methode()

**Auf Layer anwendbare Methoden**
`captureEvents`	Ereignisse überwachen
`handleEvent`	Ereignisse behandeln
`load`	externe Datei laden
`moveAbove`	über einen anderen layer legen
`moveBelow`	unter einen anderen layer legen
`moveBy`	bewegen um Anzahl Pixel
`moveTo`	bewegen zu Position relaitv
`moveToAbsolute`	bewegen zu Position absolut
`releaseEvents`	Ereignisüberwachung beenden
`resizeBy`	Breite und Höhe verändern um Anzahl Pixel
`resizeTo`	Breite und Höhe auf Anzahl Pixel setzen
`routeEvent`	Event-Handler-Hierarchie durchlaufen

**Eigenschaften von Layern**
`above`	oberhalb liegender Layer
`background`	Hintergrundbild eines Layers
`bgColor`	Hintergrundfarbe eines Layers
`below`	unterhalb liegender Layer
`clip`	Anzeigebereich eines Layers
`document`	document-Objekt eines Layers
`left`	Links-Wert der linken oberen Ecke relativ
`length`	Anzahl Layer
`name`	Name eines Layers
`pageX`	Links-Wert der linken oberen Ecke absolut
`pageY`	Oben-Wert der linken oberen Ecke absolut
`parentlayer`	Objekt des Eltern-Layers
`siblingAbove`	Objekt des oberhalb liegenden Layers
`siblingBelow`	Objekt des unterhalb liegenden Layers
`src`	Externe Datei eines Layers
`top`	Oben-Wert der linken oberen Ecke relativ
`visibility (=inherit/show/hide)`	Sichtbarkeit eines Layers
`zIndex`	Schichtposition eines Layers

Anwendungsbeispiele

Nur für Layer-Besitzer!

Seitenelemente verschwinden lassen

<script language=JavaScript>
   function sichtbar()
  {
      if (document.laytext.visibility == "show")
      document.laytext.visibility = "hide";
      else document.laytext.visibility = "show";
   }
</script>

Diesen Effekt, hier mit ilayern, könnte man für die Anlage von Menüs nutzen, bei denen Unterpunkte zunächst verborgen bleiben sollen, wenn, ja wenn nicht der ganze Platz reserviert bliebe.

Bewegte Elemente

Hier wird eine Bewegungsfunktion genutzt, die sich alle 70/1000 Sekunden selbst aufruft. Gestartet wird beim Laden im Body-Tag. Unterhalb der Tabelle sind die beiden ilayer definiert. Sie liegen im Entwurf um 100 Pixel verschoben (nebeneinander). Man beachte die resultierende Verschiebung der X-Achsen, die sich im Code zeigt.

<script language=JavaScript>
   function krieche()
   {
      if (document.kurz.visibility=="show")
      {
         x=x+50; if(x>1000)x=0;
         document.kurz.visibility="hide";
         document.lang.visibility="show";
      }
      else
      {
         document.kurz.pageX = x;
         document.lang.pageX = x-100;
         document.kurz.visibility="show";
         document.lang.visibility="hide";
      }
      window.setTimeout('krieche()',70);
   }
</script>
Start:
<body onload="krieche();">
Die beiden layer:
   <ilayer name="kurz" pageX=0 visibility="show">
      <img SRC="bilder/r_kurz.gif" height=30 width=150>
   </ilayer>
   <ilayer name="lang" pageX=0 visibility="hide">
      <img SRC="bilder/r_lang.gif" height=30 width=150>
   </ilayer>

Wenn die Tierchen kriechen, kennt der Browser Layer!

Und so etwa sollte es aussehen!