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
captureEventsEreignisse überwachen
handleEventEreignisse behandeln
loadexterne Datei laden
moveAboveüber einen anderen layer legen
moveBelowunter einen anderen layer legen
moveBybewegen um Anzahl Pixel
moveTobewegen zu Position relaitv
moveToAbsolutebewegen zu Position absolut
releaseEventsEreignisüberwachung beenden
resizeByBreite und Höhe verändern um Anzahl Pixel
resizeToBreite und Höhe auf Anzahl Pixel setzen
routeEventEvent-Handler-Hierarchie durchlaufen

 
 
Eigenschaften von Layern
aboveoberhalb liegender Layer
backgroundHintergrundbild eines Layers
bgColorHintergrundfarbe eines Layers
belowunterhalb liegender Layer
clipAnzeigebereich eines Layers
documentdocument-Objekt eines Layers
leftLinks-Wert der linken oberen Ecke relativ
lengthAnzahl Layer
nameName eines Layers
pageXLinks-Wert der linken oberen Ecke absolut
pageYOben-Wert der linken oberen Ecke absolut
parentlayerObjekt des Eltern-Layers
siblingAboveObjekt des oberhalb liegenden Layers
siblingBelowObjekt des unterhalb liegenden Layers
srcExterne Datei eines Layers
topOben-Wert der linken oberen Ecke relativ
visibility (=inherit/show/hide)Sichtbarkeit eines Layers
zIndexSchichtposition 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!