SELFHTML: Dynamisches HTML / DHTML-Modelle / Das ältere DHTML-Modell von Netscape
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Wie Sie die ältere DHTML-Technik von Netscape, die auf Layern basiert, einsetzen
Keywords: SELFHTML, Dynamisches HTML, Dynamic HTML, DHTML, Netscape, Layer, layers-Objekt
Date: 2005-08-22T21:21:39+02:00

| # Das ältere DHTML-Modell von Netscape
| Allgemeines zum DHTML-Modell von Netscape 4.x Layer-Bereiche dynamisch anzeigen/verstecken Layer-Bereiche dynamisch überlappen Layer-Bereiche dynamisch bewegen Layer-Bereiche dynamisch vergrößern/verkleinern Layer-Inhalte dynamisch austauschen Layer ohne layer-Element simulieren Das Event-Objekt Inline-Scripts bei Layern

## Allgemeines zum DHTML-Modell von Netscape 4.x

Die hier vorgestellte Layer-Technik funktioniert nur mit Netscape in der Version 4.x. In der völlig neu programmierten Version 6.0 und den Mozilla-Quellen dazu ist die gesamte Layer-Technik nicht mehr implementiert und funktioniert nicht mehr. Der Grund ist, dass das W3-Konsortium die Layer-Technik abgelehnt hat. Stattdessen wird das Document Object Model (DOM) empfohlen, das auch in Netscape ab Version 6.0 implementiert ist. Die Layer-Technik, wie sie hier beschrieben wird, ist also nur noch im Hinblick auf die Rückwärtskompatibilität zur 4er-Serie der Netscape-Browser von Bedeutung.

"Dynamisches HTML" - das ist bei Netscape 4.x nicht wie im DOM oder beim älteren Modell des Internet Explorers der beliebige nachträgliche Zugriff auf alle Elemente einer HTML-Datei. Sie können mit Netscape 4.x also nicht einfach nachträglich einen Textabsatz, der mit `<p>`...`</p>` definiert ist, völlig anders formatieren, oder in eine Überschrift 1. Ordnung verwandeln.

Dynamisches HTML gibt es bei Netscape 4.x nur im Zusammenhang mit positionierten Elementen. Bei Netscape ist Dynamisches HTML die Möglichkeit, positionierte Layer dynamisch zu behandeln, also ein- und auszublenden, zu verschieben usw.

Die Layer-Technologie von Netscape ist allerdings sehr mächtig. Voraussetzung dabei ist das Definieren von Layern in HTML. Es besteht zwar auch die Möglichkeit, ohne das `layer`-Element Dynamisches HTML für Netscape zu schreiben, doch das ganze Konzept, das Netscape seinem Browser in der Version 4.x als Dynamisches HTML eingebaut hat, basiert auf dem `layer`-Element. Wenn man auf das `layer`-Element verzichten will, bleibt einem nur, die Layer zu "simulieren".

Die Beispiele auf dieser Seite konzentrieren sich deshalb im wesentlichen auf die Layer-Technologie. Denn nur so wird der Ansatz deutlich, den Netscape mit seiner Implementierung von Dynamischem HTML verfolgt.

Um die Beispiele auf dieser Seite zu verstehen, müssen Sie vor allem die Layer in HTML kennen sowie Vorkenntnisse in JavaScript mitbringen. Für die Layer-Technik ist vor allem das JavaScript-Objekt layers entscheidend. Dort werden die einzelnen Eigenschaften und Methoden systematisch beschrieben, die hier in den Beispielen verwendet werden.

## Layer-Bereiche dynamisch anzeigen/verstecken

Sie können Layer mit Hilfe von JavaScript dynamisch anzeigen und verstecken. Je nachdem, wie Sie Ihre Layer definieren, können Sie dadurch die verschiedensten Effekte erzielen. Das folgende Beispiel demonstriert, wie Sie eine "Dia-Show" aus kurzen Texten definieren können. Der Anwender braucht nicht mehr scrollen, sondern klickt sich von einem Text zum nächsten. Die Texte werden in einer "Box" angezeigt.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    <script type="text/javascript">
    var AktuellerText = 0;
    var Texte = 3;

    function NextText () {
      ++AktuellerText;
      if (AktuellerText >= Texte)
        AktuellerText = 0;
      for (var i = 0; i < Texte; i++)
        document.layers[i].visibility = "hide";
      document.layers[AktuellerText].visibility = "show";
    }
    </script>
    </head><body>

    <layer visibility="show" top="150" left="50" width="400" height="125" bgcolor="#DDFFDD">
     <p style="color:#006600; font-family:Arial,Helvetica,Sans-Serif; font-size:1.2em; font-weight:bold;">
     <span style="color:#000000; font-family:Arial,Helvetica,Sans-Serif; font-size:1.8em; font-weight:bold;">
     1.</span><br>Man kann nur Brücken schlagen zwischen Ufern, die man auseinanderhält.</p>
    </layer>

    <layer visibility="hide" top="150" left="50" width="400" height="125" bgcolor="#DDFFDD">
    <p style="color:#006600; font-family:Arial,Helvetica,Sans-Serif; font-size:1.2em; font-weight:bold;">
    <span style="color:#000000; font-family:Arial,Helvetica,Sans-Serif; font-size:1.8em; font-weight:bold;">
    2.</span><br>Je größer die Erwartung, desto unmöglicher die Erfüllung.</p>
    </layer>

    <layer visibility="hide" top="150" left="50" width="400" height="125" bgcolor="#DDFFDD">
    <p style="color:#006600; font-family:Arial,Helvetica,Sans-Serif; font-size:1.2em; font-weight:bold;">
    <span style="color:#000000; font-family:Arial,Helvetica,Sans-Serif; font-size:1.8em; font-weight:bold;">
    3.</span><br>Wer sich aufgibt, liebt nicht, weil er sich nicht liebt; nur wer
    sich verschenkt, liebt, weil er sich liebt.</p>
    </layer>

    <layer top="275" left="50" width="400" bgcolor="#DDFFDD">
    <center><form name="Formular" action=""><input type="button" value=" weiter &gt;&gt; "
    onclick="NextText()"></form></center>
    </layer>

    </body></html>

### Erläuterung:

Im Körper der Beispiel-HTML-Datei werden insgesamt vier Layer definiert. Die ersten drei Layer enthalten Texte, die dynamisch wechseln sollen. Der vierte Layer enthält einen Button. Wenn der Anwender auf den Button klickt, wird eine JavaScript- Funktion mit Namen `NextText()` aufgerufen. Diese Funktion wird im Kopf der HTML-Datei in einem JavaScript-Bereich definiert. Die Funktion sorgt dafür, dass der jeweils nächste Text angezeigt wird.

Beachten Sie, dass die ersten drei Layer identische Angaben zur Position enthalten. Die Angaben `top="150"` (linke obere Ecke beginnt 150 Pixel von oben), `left="50"` (linke obere Ecke beginnt 50 Pixel von links), `width="400"` (Breite des Layers: 400 Pixel), und `height="125"` (Höhe des Layers: 125 Pixel), sind in allen Layern die gleichen. Die drei Layer unterscheiden sich lediglich durch die Angabe des Attributs `visibility`. Der erste Layer wird mit `visibilty="show"` auf "sichtbar" gesetzt, die beiden anderen mit `visibilty="hide"` auf "unsichtbar". Dadurch wird erreicht, dass zunächst nur der erste Layer am Bildschirm angezeigt wird.

Der vierte Layer, also der mit dem Kontroll-Button, enthält ebenfalls Angaben zur Position. Er hat die gleiche Breite wie die beiden ersten Layer und beginnt auch links an der gleichen Position. In der Höhe beginnt er genau 125 Pixel tiefer als die beiden ersten Layer. Da diese eine Höhe von 125 Pixeln haben, schließt der "Kontroll-Button-Layer" also nahtlos an die oberen Layer an. Er enthält keine Angabe zur Sichtbarkeit. Das bedeutet, er ist sichtbar, und das wird sich auch im Verlauf des JavaScripts nicht ändern. Denn der Inhalt dieses Layers steuert ja das Geschehen.

In dem JavaScript-Bereich im Kopf der Datei werden zunächst zwei globale Variablen definiert. Da sie außerhalb jeder Funktion stehen, behält ihr aktueller Wert solange Gültigkeit, wie die HTML-Datei angezeigt wird. In der Variablen `AktuellerText` wird die Indexnummer des aktuellen Textlayers gespeichert. In `Texte` wird die Anzahl der dynamisch austauschbaren Texte bzw. Layer gespeichert. Sie könnten anstelle der drei Layer mit Texten auch 10 oder 100 solcher Layer definieren. Entsprechend der Anzahl der definierten Layer müssten Sie nur den Anfangswert von Texte anders zuweisen.

Innerhalb der Funktion `NextText()` wird zunächst die Nummer von `AktuellerText` erhöht, denn es soll ja der jeweils nächste Text angezeigt werden. Anschließend werden in einer for-Schleife alle Layer mit Texten auf "unsichtbar" gesetzt. Am Ende wird der Layer desjenigen Textes, der angezeigt werden soll (`AktuellerText`) auf "sichtbar" gesetzt. Dadurch entsteht der Dia-Show-Effekt.

### Beachten Sie:

Netscape dehnt die Layer entsprechend ihres Inhalts aus. Wenn der Inhalt eines Textes im obigen Beispiel größer ist als der definierte Layer-Bereich, überschneidet er sich mit dem Layer des Kontroll-Buttons, jedoch so, dass der Layer mit dem Kontroll-Button über dem unteren Teil des Layers mit dem Text liegt. Der Grund dafür ist, dass der Layer mit dem Kontroll-Button hinter dem Layer mit dem Text definiert wird und daher im "Stack" (Stapel) weiter oben liegt. Wenn Sie die Größe eines Layers unabhängig vom Inhalt fest machen wollen, müssen Sie das Attribut `clip` benutzen (siehe auch: Anzeigebereich von Layern beschneiden).

## Layer-Bereiche dynamisch überlappen

Sie können Layer so positionieren, dass diese sich überlappen. Das hat ohne JavaScript meistens allerdings wenig Sinn, denn der Anwender soll die Inhalte der Layer ja sehen können. Mit Hilfe von JavaScript können Sie jedoch bewirken, dass der Anwender sich einen einzelnen Layer in den Vordergrund holen kann, um dessen Inhalt anzuzeigen. Auf diese Weise können Sie auf einer WWW-Seite durchaus verschiedene Inhalte unterbringen, für die normalerweise mehrere Seiten angebracht wären. Im folgenden Beispiel sind die Layer wie in einem Karteikastenstapel aufgereiht. Der Anwender kann einen Layer "herausgreifen".

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    <style type="text/css">
    layer.Text { padding:5px; font-size:12px; font-family:Arial,Helvetica,Sans-Serif; }
    layer.Kopf { font-size:12px; font-family:Arial,Helvetica,Sans-Serif; font-weight:bold; text-align:right; }
    a:link, a:visited, a:active { color:white; }
    a.normal:link { color:#AA5522; text-decoration:underline; }
    a.normal:visited { color:#772200; text-decoration:underline; }
    a.normal:active { color:#000000; text-decoration:underline; }
    </style>
    <script type="text/javascript">
    var aktiv = "Home";
    function Hervorheben (neu_aktiv) {
      document.layers["Feedback"].zIndex = 1;
      document.layers["Support"].zIndex = 2;
      document.layers["Produkte"].zIndex = 3;
      document.layers["Home"].zIndex = 4;
      document.layers[aktiv].bgColor = "#CCCCCC";
      document.layers[aktiv].layers[0].bgColor = "#666666";
      document.layers[aktiv].layers[1].visibility = "hide";
      document.layers[neu_aktiv].zIndex = 5;
      document.layers[neu_aktiv].bgColor = "#FFCCFF";
      document.layers[neu_aktiv].layers[0].bgColor = "#000000";
      document.layers[neu_aktiv].layers[1].visibility = "show";
      aktiv = neu_aktiv;
    }
    </script>
    </head><body>
    <layer id="Feedback" top="130" left="10" width="360" height="230" bgcolor="#CCCCCC">
      <layer class="Kopf" width="360" height="25" bgcolor="#666666">
      <a href="javascript:Hervorheben('Feedback')">Feedback</a>
      </layer>
      <layer class="Text" top="25" visibility="hide">
      Hier Ihr Feedback:
      <form name="Formular" action=""><textarea rows="5" cols="25">Bla Bla</textarea></form>
      </layer>
    </layer>
    <layer id="Support" top="155" left="70" width="360" height="230" bgcolor="#CCCCCC">
      <layer class="Kopf" width="360" height="25" bgcolor="#666666">
      <a href="javascript:Hervorheben('Support')">Support</a>
      </layer>
      <layer class="Text" top="25" visibility="hide">
      Unser Support ist wirklich Bla Bla
      </layer>
    </layer>
    <layer id="Produkte" top="180" left="130" width="360" height="230" bgcolor="#CCCCCC">
      <layer class="Kopf" width="360" height="25" bgcolor="#666666">
      <a href="javascript:Hervorheben('Produkte')">Produkte</a>
      </layer>
      <layer class="Text" top="25" visibility=hide>
      Unsere Produkte sind ja so wahnsinnig Bla Bla
      </layer>
    </layer>
    <layer id="Home" top="205" left="190" width="360" height="230" bgcolor="#FFCCFF">
      <layer class="Kopf" width="360" height="25" bgcolor="#000000">
      <a href="javascript:Hervorheben('Home')">HOME</a>
      </layer>
      <layer class="Text" top="25" visibility="show">
      Unser Home ist unser Bla Bla
      </layer>
    </layer>
    </body></html>

### Erläuterung:

Im Beispiel werden vier "große" Layer definiert: einer für "Feedback", einer für "Support", einer für "Produkte" und einer für "Home", was bedeuten soll, dass dieser Layer eine Art Homepage, einen Home-Layer darstellt. Dieser Layer wird auch zuerst im Vordergrund angezeigt. Und zwar deshalb, weil er als letzter definiert wird. Wenn Sie bei Layern kein Attribut `z-index` notieren, liegt immer derjenige Layer ganz oben, der als letzter definiert wird.

Dem Beispiel können Sie auch entnehmen, dass innerhalb der vier großen Layer jeweils zwei "innere" Layer definiert werden. Layer, die innerhalb anderer Layer definiert werden, werden relativ zu ihrem Eltern-Layer positioniert. Dazu müssen Sie sich einen Layer vorstellen wie einen neuen kleinen Dateikörper. Alles, was innerhalb davon notiert wird, wird relativ dazu positioniert.

Die Angaben zu `top`, `left`, `height` und `width` in den Layern im obigen Beispiel sind alle genau ermittelt, und zwar so, dass die Layer optisch einen sauber sortierten Karteikastenstapel darstellen. Versuchen Sie, die Abhängigkeiten der Positionierungsangaben im Beispiel zu ermitteln. So können Sie erkennen, wie Sie vorgehen müssen, um mehrere Layer nach einem von Ihnen gewünschten Kriterium ordentlich verteilt im Anzeigefenster zu platzieren.

Jeder der "großen" Layer enthält im obigen Beispiel zwei innere Layer: einen Layer, der wie eine Titelleiste wirkt und einen Verweis enthält, und einen Layer, der den eigentlichen Inhalt enthält. Die Verweise in den Titelleisten-Layern rufen eine JavaScript-Funktion namens `Hervorheben()` auf. Diese Funktion bewirkt das dynamische Hervorholen des "großen" Layers, der zu dem angeklickten Verweis gehört (also des Eltern-Layers von dem Layer, in dem der Verweis steht).

In dem Script-Bereich, in dem die Funktion `Hervorheben()` steht, wird vor der Funktion eine Variable `aktuell` definiert. Sie bekommt zu Beginn den Namen des vorne liegenden Layers zugewiesen. Das ist derjenige Name, der beim entsprechenden Layer im `id`-Attribut vergeben wurde.
Die Funktion `Hervorheben()` erwartet einen Parameter, nämlich den Namen desjenigen Layers, der anstelle des bisher vorne liegenden Layers hervorgeholt werden soll. Bei den Verweisen, die die Funktion aufrufen, wird denn auch wieder der Name übergeben, der im entsprechenden Layer bei `id` vergeben ist.

Innerhalb der Funktion `Hervorheben()` wird zunächst die normale Layer-Reihenfolge hergestellt. Das geschieht durch Zuweisen einer Zahl an die Layer-Objekteigenschaft `zIndex`. Je höher die Zahl, desto weiter vorne im Stapel liegt der Layer. Das Wiederherstellen der normalen Layer-Reihenfolge bewirkt, dass der "Karteikastenstapel", den das Beispiel darstellt, immer aufgeräumt erscheint.

Anschließend wird der bisher aktive Layer, bezeichnet durch `document.layers[aktiv]`, mit mehreren Anweisungen behandelt. Die Angabe `aktiv` in den eckigen Klammern zeigt zunächst auf den Layer `"Home"`. Am Ende der Funktion wird der Wert der Variablen `aktiv` jedoch geändert. Dort wird ihr der Name des neuen hervorgehobenen Layers zugewiesen. Dadurch ist beim nächsten Aufruf der Funktion dieser Layer derjenige, der von `document.layers[aktiv]` betroffen ist.
Die Anweisungen, die den bisher aktiven Layer betreffen, weisen diesem Attribute zu, die ihn optisch zu einem "untenliegenden" Layer im Karteikastenstapel machen.

Derjenige Layer mit dem Namen, der mit dem Parameter `neu_aktiv` übergeben wurde, erhält dagegen diejenigen optischen Attribute, die ihn als hervorgehobenen Layer auszeichnen. Er bekommt auch die höchste Zahl für `zIndex`. Dadurch wird er als oberster Layer angezeigt.

### Beachten Sie:

Im Layer `Feedback` ist ein Formular definiert. Dieses Formular wird im Netscape 4 mit `document.layers.Feedback.document.Formular` angesprochen, da es Bestandteil des Layers `Feedback` ist. Ein Layer stellt aus Sicht von Netscape ein Dokument im Dokument dar und hat ein eigenes document-Objekt.

## Layer-Bereiche dynamisch bewegen

Sie können Layer mit beliebigen Inhalten über das Anzeigefenster springen oder wandern lassen. Das Springen zu einer Stelle ist dabei nur ein einziger Befehl, da dies als Methode im Layer-Objekt von JavaScript zur Verfügung steht. Wenn Sie dagegen zeitgesteuerte Bewegungseffekte wollen, müssen Sie die Positionsberechung vom Startpunkt bis zum Endpunkt des Bewegungsvorgangs "zu Fuß" programmieren. Das folgende Beispiel zeigt, wie so etwas im Prinzip funktioniert.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    <style type="text/css">
    p { font-weight:bold }
    a.Navlink:link { color:#FF0000 }
    a.Navlink:visited { color:#FF0000 }
    a.Navlink:active { color:#000000 }
    </style>
    <script type="text/javascript">
    function hBeweg (LayerNum, bis_links, Pixel, Pause) {
      var Restpixel = bis_links - document.layers[LayerNum].left;
      if (bis_links < document.layers[LayerNum].left)
        Pixel = 0 - Pixel;
      if (Math.abs(Restpixel) > Math.abs(Pixel)) {
        document.layers[LayerNum].moveBy(Pixel, 0);
      } else {
        document.layers[LayerNum].moveBy(Restpixel, 0);
      }
      if (document.layers[LayerNum].left != bis_links)
        window.setTimeout("hBeweg(" + LayerNum + "," + bis_links + "," + Math.abs(Pixel) + ")", Pause);
    }

    function vBeweg (LayerNum, bis_oben, Pixel, Pause) {
      var Restpixel = bis_oben - document.layers[LayerNum].top;
      if (bis_oben < document.layers[LayerNum].top)
        Pixel = 0 - Pixel;
      if (Math.abs(Restpixel) > Math.abs(Pixel)) {
        document.layers[LayerNum].moveBy(0, Pixel);
      } else {
        document.layers[LayerNum].moveBy(0, Restpixel);
      }
      if (document.layers[LayerNum].top != bis_oben)
        window.setTimeout("vBeweg(" + LayerNum + "," + bis_oben + "," + Math.abs(Pixel) + ")", Pause);
    }
    </script>
    </head><body>
    <layer left="10" top="30" width="450" height="250" bgcolor="#FFFF66">
    <h1>Einen springen lassen...</h1>
    <p>Springe nach:
    <a class="Navlink" href="javascript:document.layers[0].moveTo(10,30)">links oben</a> |
    <a class="Navlink" href="javascript:document.layers[0].moveTo(260,30)">rechts oben</a> |
    <a class="Navlink" href="javascript:document.layers[0].moveTo(10,260)">links unten</a> |
    <a class="Navlink" href="javascript:document.layers[0].moveTo(260,260)">rechts unten</a><br></p>
    <p>Bewege nach:
    <a class="Navlink" href="javascript:hBeweg(0,10,4,2)">links</a> |
    <a class="Navlink" href="javascript:hBeweg(0,260,4,2)">rechts</a> |
    <a class="Navlink" href="javascript:vBeweg(0,30,4,2)">oben</a> |
    <a class="Navlink" href="javascript:vBeweg(0,260,4,2)">unten</a></p>
    </layer>
    </body></html>

### Erläuterung:

Innerhalb des Dateikörpers der HTML-Datei im obigen Beispiel wird ein Layer definiert. Dieser Layer enthält insgesamt acht Verweise. Bei jedem Verweis wird JavaScript-Code ausgeführt. Dabei wird der Befehl, den der Verweis dem Anwender anbietet, in die Tat umgesetzt.

Alle Verweise sorgen für eine Neupositionierung des Layers, in dem sie sich selber befinden. Das muss nicht so sein - es ist im obigen Beispiel einfach zu Demo-Zwecken so gelöst. Der Layer, den es dynamisch zu positionieren gilt, könnte auch etwas ganz anderes enthalten, etwa Grafiken, Tabellen usw.

Die ersten vier Verweise führen lediglich Sprünge aus, d.h. beim Klicken auf einen dieser Verweise wird der Layer-Inhalt einfach sofort an einer anderen Stelle im Anzeigefenster angezeigt. Für diese Aufgabe stellt das Layer-Objekt von JavaScript die Methode `moveTo()` zur Verfügung. Mit einer Anweisung wie `document.layers[0].moveTo(...)` positionieren Sie den ersten Layer der Datei (der den Index 0 hat) an einer neuen Position. Die Methode `moveTo()` setzt die neue Position der linken oberen Ecke des Layers. Dazu erwartet die Methode zwei Parameter, und zwar zuerst den Wert für links, und als zweites den Wert für oben. Mit einer Anweisung wie `document.layers[0].moveTo(260,10)` wird also die linke obere Ecke des Layers auf 260 Pixel von links und 10 Pixel von oben gesetzt. Die Angaben beziehen sich auf das jeweilige Elternelement des Layers. Da der Layer im obigen Beispiel kein Layer innerhalb eines anderen Layers ist, ist das normale Anzeigefenster das Elternelement.

Während das einfache Neupositionieren mit einer einzigen JavaScript-Anweisung möglich ist, die im obigen Beispiel direkt in den entsprechenden Verweisen steht, muss zum dynamischen Bewegen von Layern eine eigene Funktion aufgerufen werden, die den Bewegungsablauf bestimmt. Im obigen Beispiel gibt es zwei solcher Funktionen. Die Funktion `hBeweg()` kann Layer horizontal nach links oder rechts verschieben, die Funktion `vBeweg()` leistet das gleiche, nur vertikal nach oben oder unten. Entsprechend werden die Funktionen aufgerufen. Wenn der Anwender einen der Verweise zum Bewegen nach rechts oder links angeklickt, wird `hBeweg()` aufgerufen, und bei den Verweisen zum Bewegen nach unten oder oben wird `vBeweg()` aufgerufen.

Beide Funktionen sind allgemein geschrieben. Deshalb erwarten sie als Input auch verschiedene Parameter, die beim Funktionsaufruf zu übergeben sind:
`LayerNum` ist die Indexnummer des Layers, der bewegt werden soll. Da im Beispiel immer der gleiche und einzige vorhandene Layer bewegt werden soll, wird beim Aufruf der Funktionen immer dessen Indexnummer 0 übergeben.
`bis_links` (bei `hBeweg()`) bzw. `bis_oben` (bei `vBeweg()`) ist der neue Endwert, bei dem die Bewegung gestoppt werden soll. Je nachdem, ob der Wert, den Sie dabei übergeben, größer oder kleiner ist als die aktuelle Position des Layers, ergibt sich automatisch die Bewegungsrichtung.
`Pixel` ist die Anzahl der Pixel, um die pro Bewegungsschritt weiter gesprungen wird. Je höher der Wert ist, den Sie dafür übergeben, desto schneller und ruckartiger die Bewegung. Im obigen Beispiel wird in allen Fällen 4 übergeben.
`Pause` ist ein weiterer Parameter zur Beeinflussung der Geschwindigkeit. Je höher der Wert, desto langsamer die Bewegung.

Ein Bewegen von Layern besteht in nichts anderem als einem schrittweise neuen Positionieren des Layers. In den Funktionenen `hBeweg()` und `vBeweg()` stehen jeweils etwa in der Mitte zwei Anweisungen der Art `document.layers[LayerNum].moveBy(...)`, von denen immer nur eine ausgeführt wird. Das ist diejenige Anweisung, mit der der Layer jeweils neu positioniert wird. Es handelt sich einfach um den Aufruf der Methode `moveBy()` des Layer-Objekts. Diese Methode funktioniert genauso wie `moveTo()`, nur mit relativen Angaben statt mit absoluten.

Damit der Layer nicht nur einmal, sondern weiter bewegt wird, rufen sich die beiden Funktionen `hBeweg()` und `vBeweg()` am Ende jeweils selbst wieder auf. Der Schleifen-Effekt, der dadurch entsteht, wird erst abgebrochen, wenn der gewünschte Endwert erreicht ist.
Der Selbstaufruf der Funktion ist in die JavaScript-Methode window.setTimeout() eingebunden. Dadurch kann die Verzögerung berücksichtigt werden, die mit dem Parameter `Pause` übergeben wurde. Der Selbstaufruf der Funktion wirkt etwas kompliziert. Das liegt daran, dass die Funktion sich auch wieder mit den von ihr erwarteten Parametern aufrufen muss. Leider ist es nicht möglich, dazu einen normalen Funktionsaufruf zu notieren und einfach die übergeben bekommenen Parameter wieder zu übergeben. Stattdessen wird eine Zeichenkette zusammengebaut, welche die Funktion beim Neuaufruf mit tatsächlichen Werten versorgt.

Die übrigen Anweisungen in den beiden Funktionen dienen zur Kontrolle des Bewegungsablaufs, vor allem dazu, dass trotz unterschiedlicher Aufrufparameter am Ende tatsächlich die gewünschte Endposition erreicht wird. So ist `Restpixel` eine Hilfsvariable, die ermittelt, wie viele Pixel noch zwischen aktueller Layerposition und dem gewünschten Endwert liegen. Wichtig ist auch die korrekte Bestimmung der Bewegungsrichtung. Wenn der gewünschte Endwert der Bewegung kleiner ist als die Position des Layers beim Start der Bewegung, dann muss der Schrittwert, der mit dem Parameter `Pixel` übergeben wird, als negative Zahl interpretiert werden. Denn nur so kann es "rückwärts" gehen, also nach links oder nach oben. Mit dem Ausdruck `Pixel=0-Pixel` wird der Schrittwert bei Bedarf auf eine negative Zahl "umgepolt".

### Beachten Sie:

Komplexere Bewegungsabläufe benötigen entsprechend komplexere Programmierung. Bei diagonalen Bewegungen ist es nur einfach, solange die Anzahl der Pixel, um die pro Bewegungsschritt weiter positioniert wird, horizontal und vertikal immer proportional ist. Sobald Sie aber "krumme" Aufgaben lösen wollen, etwa die, von oben 10 links 10 nach oben 86 links 623 auf möglichst geradem Weg zu kommen, dürfen Sie in die Tiefen der Arithmetik eintauchen. Und wenn Sie gar Kreis- oder Ellipsenbewegungen wollen, müssen Sie entsprechende geometrische Formeln kennen und die dafür vorgesehenen Methoden des Math-Objekts von JavaScript benutzen.

## Layer-Bereiche dynamisch vergrößern/verkleinern

Durch dynamisches Verändern des angezeigten Bereichs eines Layers lassen sich unzählige interessante Effekte erzielen, zum Beispiel zum dynamischen Aufklappen und Zuklappen von Teilen einer WWW-Seite. Das folgende Beispiel bewirkt drei "Blöcke", von denen zunächst nur Titelzeilen sichtbar sind. Jede Titelzeile enthält einen Verweis. Beim Anklicken des Verweises wird unterhalb der Titelzeile ein Bereich mit Inhalt nach unten aufgerollt. Beim nächsten Anklicken des Verweises wird er wieder zugerollt.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    <style type="text/css">
    layer.Text { padding:5px; font-size:18px; font-family:Arial,Helvetica,Sans-Serif; color:#FFFFFF }
    layer.Kopf { padding:5px; font-size:14px; font-family:Arial,Helvetica,Sans-Serif; font-weight:bold; }
    a:link, a:visited, a:active { color:#FFFFE0; }
    a.normal:link { color:#AA5522; text-decoration:underline; }
    a.normal:visited { color:#772200; text-decoration:underline; }
    a.normal:active { color:#000000; text-decoration:underline; }
    </style>
    <script type="text/javascript">
    var Status = new Array("zu", "zu", "zu");
    function AufUndZu (LayerNum) {
      var i;
      if (Status[LayerNum] == "zu") {
        for (i = 2; i < 250; ++i)
          document.layers[LayerNum].clip.bottom = i;
        Status[LayerNum] = "auf";
      } else {
        for (i = 250; i > 2; --i)
          document.layers[LayerNum].clip.bottom = i;
        Status[LayerNum] = "zu";
      }
    }
    </script>
    </head><body>
    <layer class="Text" left="10" top="70" width="198" height="250" bgcolor="#000099" clip="0,0,198,2">
    HTML ist die Sprache für die Strukturierung von Hypertext-Projekten. Logos und Godfather aller
    Web-Seiten. Vermutlich das erfolgreichste Dateiformat der EDV-Geschichte.
    </layer>
    <layer class="Text" left="210" top="70" width="198" height="250" bgcolor="#994000" clip="0,0,198,2">
    CSS ist die Sprache für die Formatierung von Web-Seiten. Physis und Sohnprinzip. Klinkt sich
    nahtlos in HTML ein und sorgt dafür, das Strukturen zu Farben und Formen werden.
    </layer>
    <layer class="Text" left="410" top="70" width="198" height="250" bgcolor="#008000" clip="0,0,198,2">
    JavaScript ist die Sprache für Dynamische Web-Seiten. Kinesis und Geistprinzip. Klinkt sich nahtlos
    in HTML ein und zunehmend auch in CSS. Ist allerdings am schwersten zu verstehen.
    </layer>
    <layer class="Kopf" left="10" top="45" width="198" height="25" bgcolor="#000000">
    <a href="javascript:AufUndZu(0)">HTML</a>
    </layer>
    <layer class="Kopf" left="210" top="45" width="198" height="25" bgcolor="#000000">
    <a href="javascript:AufUndZu(1)">CSS</a>
    </layer>
    <layer class="Kopf" left="410" top="45" width="198" height="25" bgcolor="#000000">
    <a href="javascript:AufUndZu(2)">JavaScript</a>
    </layer>
    </body></html>

### Erläuterung:

In dem Beispiel werden insgesamt sechs Layer definiert. Die ersten drei Layer sind diejenigen, die auf- und zuklappbar sind. Zunächst sind diese Layer zugeklappt. Das wird durch das Attribut `clip` erreicht. Durch diese Angabe lässt sich der angezeigte Bereich eines Layers beliebig einschränken. Die auf-/zuklappbaren Layer im obigen Beispiel etwa haben durch die Angaben `width="198" height="250"` eine Breite von 198 und eine Höhe von 250 Pixeln. Durch die Angabe `clip="0,0,198,2"` wird folgendes erreicht: trotz der definierten Breite und Höhe ist nur der Bereich von links 0 oben 0 bis links 198 oben 2 sichtbar. Das ist nur ein ganz dünner Streifen, der aus optischen Gründen zugelassen wird. Mit `0,0,198,0` wäre von den Layern überhaupt nichts zu sehen.

Die drei unteren Layer sind mit Hilfe der Angaben zu `top`, `left`, `width` und `height` so positioniert, dass sie genau über den auf-/zuklappbaren Layern stehen. Diese "Kopf"-Layer enthalten Verweise. Bei jedem Klick auf einen Verweis in einem der Kopf-Layer wird der Layer unterhalb davon auf- oder wieder zugeklappt. Dazu wird bei jedem Klick auf einen der Verweise eine JavaScript-Funktion aufgerufen: die Funktion `AufUndZu()`, die im Kopf der Datei in einem JavaScript-Bereich definiert ist.

In dem JavaScript-Bereich wird vor der Funktion `AufUndZu()` bereits ein Array, bestehend aus drei Werten, definiert: der Array `Status`. Alle seine drei Werte erhalten den Anfangszustand `"zu"`. Da dieser Array außerhalb jeder Funktion definiert ist, stehen seine Daten jederzeit zur Verfügung.

Innerhalb der Funktion `AufUndZu()` wird geprüft, ob ein Layer derzeit auf- oder zugeklappt ist. Dazu bekommt die Funktion beim Aufruf einen Parameter `LayNum` übergeben. Das ist die Indexnummer des Layers, der auf- oder zugeklappt werden soll. Da im Beispiel die ersten drei definierten Layer davon betroffen sein sollen, kommen also nur die Indexnummern 0, 1 und 2 in Frage. Beim Aufruf der Funktion in den unteren drei Layern werden denn auch genau diese drei Werte übergeben. Mit der Abfrage `if (Status[LayerNum] == "zu")` vergleicht die Funktion `AufUndZu()`, was im Array `Status` als Wert für die übergebene Indexnummer steht. Wenn dort `"zu"` steht, wird der Layer aufgeklappt. Wenn er aufgeklappt wird, wird der Wert im Array am Ende auf den Wert `"auf"` gesetzt. Dadurch gelangt die Funktion bei der nächsten Abfrage für den gleichen Layer in den else-Zweig, wo sie genau die umgekehrten Arbeiten durchführt.

Das eigentliche Auf- und Zuklappen geschieht innerhalb der for-Schleife. Dort wird beim Aufklappen von 2 bis 250 gezählt und beim Zuklappen von 250 zurück auf 2. Abhängig vom aktuellen Schleifenwert wird die Unterseite des Clip-Bereichs des Layers mit `document.layers[LayerNum].clip.bottom` dynamisch verändert. Die Grenzwerte von 2 und 250 hängen mit den definierten Layern zusammen: die 2 ist jener Wert, der bei den Angaben `clip="0,0,198,2"` vorkommt, und 250 ist die Höhe der definierten Layer (`height="250"`). Beim Aufklappen wird also der Clip-Bereich im Script dynamisch auf 0,0,198,250 verändert. Das bedeutet: der Layer ist vollständig sichtbar. Beim Zuklappen wird dagegen wieder der Clip-Anfangszustand von 0,0,198,2 wiederhergestellt.

## Layer-Inhalte dynamisch austauschen

Einen der großen Vorteile des Microsoft-Ansatzes für Dynamisches HTML, nämlich das beliebige Austauschenkönnen von HTML-Elementinhalten, können Sie mit Hilfe von Netscape-Layern zumindest "nachstellen". Der Grund ist, dass Netscape einen Layer wie ein eigenes kleines neues Dokument innerhalb des Elterndokuments behandelt. So sind auch alle JavaScript-Objekte darauf anwendbar, die unterhalb des document-Objekts liegen. Das folgende Beispiel verdeutlicht, wie dies bei Layern im einzelnen funktioniert, und welche Möglichkeiten sich dabei eröffnen.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    <script type="text/javascript">
    function DatenSchreiben () {
      var Text = document.Input.document.Eingabe.Feld.value;
      var Laenge = document.Input.document.Eingabe.Feld.value.length;
      document.Output.document.clear();
      document.Output.document.write("<p>Sie haben folgenden Text eingegeben:<br>");
      document.Output.document.write("<b>" + Text + "<\/b><\/p>");
      document.Output.document.write("<p>Der Text hat eine Laenge von ");
      document.Output.document.write("<b>" + Laenge + " Zeichen<\/b><\/p>");
      document.Output.document.close();
    }
    </script>
    </head><body>
    <layer id="Input" bgcolor="#E4EEFF" style="padding:18px" left="10" top="100" width="280" height="280">
    <p>Geben Sie in dem Feld Text ein und klicken Sie dann auf "Interaktion"</p>
    <form name="Eingabe" action="">
    <textarea name="Feld" cols="25" rows="6" wrap="virtual"></textarea><br>
    <input type="button" value="Interaktion" width="220" onclick="DatenSchreiben()">
    </form>
    </layer>
    <layer id="Output" style="padding:18px" left="310"
    top="100" width="280" height="280">
    </layer>
    </body></html>

### Erläuterung:

Im Beispiel werden zwei Layer definiert: einer mit dem Namen (id) `Input` und einer mit dem Namen `Output`. Beide Layer sind so positioniert, dass der Layer für den Output neben dem Layer für den Input erscheint. Der Layer für den Output erhält jedoch zunächst keinen Inhalt. Im Layer für den Input wird dagegen ein Formular definiert. Das Formular besteht aus einem mehrzeiligen Eingabefeld und einem Button. Wenn der Anwender auf den Button klickt, wird die JavaScript-Funktion `SchreibeDaten()` aufgerufen, die im Kopf der Datei innerhalb eines JavaScript-Bereichs definiert ist.

Die Funktion ermittelt zunächst den eingegebenen Text und dessen Länge. Anschließend schreibt sie diese Daten zur Kontrolle in den Layer mit dem Namen `Output`. Wichtig ist, dass vor dem dynamischen Schreiben des Inhalts die Methode `clear()` aufgerufen wird, die den aktuellen Inhalt des Layers löscht, und nach dem Schreiben die Methode `close()`, die den Vorgang abschließt, sodass beim nächsten Mal ein neuer Schreibzugriff möglich ist. Dazwischen werden die eigentlichen Daten geschrieben, und zwar mit der Methode `write()`.

Alle drei Methoden sind altbekannte Methoden des document-Objekts von JavaScript. Das besondere im Fall der Layer ist, dass das document-Objekt bei den Anweisungen gleich doppelt verwendet wird. Ein Beispiel ist die Anweisung: `document.Output.document.clear();`. Auch zu Beginn der Funktion, beim Ermitteln des Formularfeldinhalts, kommt diese doppelte Verwendung von `document` vor. Solche Konstruktionen müssen Sie so verstehen: über das vorne notierte `document` sind Layer-Objekte ansprechbar, da diese unterhalb des document-Objekts liegen. `Output` ist im Beispiel der Name eines Layers. Dadurch wird dieser Layer angesprochen. Ein Layer gilt nun aber selbst wieder als "Dokument". Deshalb müssen Sie dahinter nochmals `document` und dahinter erlaubte Eigenschaften und Methoden des document-Objekts notieren. Die Anweisungen beziehen sich dann auf die Elemente innerhalb des entsprechenden Layers. Im obigen Beispiel etwa kommen Sie an den Formularfeldinhalt nur mit `document.Input.document.Eingabe.Feld.value` (`document.Eingabe.Feld.value` würde dagegen eine Fehlermeldung erzeugen).

### Beachten Sie:

Der Phantasie sind hierbei kaum Grenzen gesetzt. Alles, was Sie beispielsweise durch Interaktion mit dem Anwender mit Hilfe eines Formulars in JavaScript ermitteln und berechnen können, können Sie auf diese Weise dynamisch ausgeben. Mit Methoden wie `window.setTimeout()` können Sie auch zeitgesteuert Inhalte in Layer schreiben.

## Layer ohne `layer`-Element simulieren

Unter dem Druck von Microsoft und angesichts der Tatsache, dass das W3-Konsortium keine Anstalten machte, das `layer`-Element und damit die Grundlage für Dynamisches HTML nach dem Netscape-Ansatz in den HTML-Standard zu übernehmen, hat Netscape in die Fähigkeit zum Dynamischen Positionieren auch auf die beiden "abstrakten" HTML-Elemente `<div>`...`</div>` und `<span>`...`</span>` ausgedehnt. Wenn Sie innerhalb solcher HTML-Tags mit Hilfe Stylesheet-Angaben zur Positionierung des Elements notieren, können Sie mit JavaScript auf solche Angaben zugreifen. Netscape interpretiert die Angaben dann genau so wie bei Layern.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    <script type="text/javascript">
    function Zeigen () {
      document.BildAnzeige.visibility = "visible";
      document.ZeigenVerweis.visibility = "hidden";
      document.VersteckenVerweis.visibility = "visible";
    }

    function Verstecken () {
      document.BildAnzeige.visibility = "hidden";
      document.VersteckenVerweis.visibility = "hidden";
      document.ZeigenVerweis.visibility = "visible";
    }
    </script>
    <style type="text/css">
    #ZeigenVerweis {
    position:absolute; left:100; top:140; width:400; height:30; visibility:visible; }
    #VersteckenVerweis {
    position:absolute; left:100; top:140; width:400; height:30; visibility:hidden; }
    #BildAnzeige {
    position:absolute; left:100; top:170; width:400; height:230; visibility:hidden; }
    </style>
    </head><body>
    <div id="ZeigenVerweis">
    <a href="javascript:Zeigen()"><b>Zeig das Bild an</b></a>
    </div>
    <div id="VersteckenVerweis">
    <a href="javascript:Verstecken()"><b>Versteck das Bild</b></a>
    </div>
    <div id="BildAnzeige">
    <img src="denker.jpg" width="91" height="177" border="0" alt="Denker">
    </div>
    </body></html>

### Erläuterung:

Das Beispiel bewirkt, dass beim Anklicken eines Verweises ein Bild angezeigt wird, das zunächst nicht sichtbar ist. Gleichzeitig erscheint ein neuer Verweis, der das Ausblenden des Bildes erlaubt. Auf diese Weise lässt sich das Bild immer wieder ein- und ausblenden.

In dem Beispiel werden dazu innerhalb des Dateikörpers drei Bereiche mit `<div>`...`</div>` definiert. Alle `div`-Bereiche erhalten CSS-Eigenschaften zur Positionierung, und zwar im Dateikopf in dem `style`-Bereich. Ohne solche Angaben ist bei Netscape kein dynamischer Zugriff auf das entsprechende Element möglich. Dass die CSS-Angaben zentral definiert werden, hat seine Ursache darin, dass einige Netscape-4-Versionen mit Angaben direkt im einleitenden `<div>`-Tag Probleme haben.

Die beiden ersten `<div>`-Bereiche im Beispiel haben die gleichen Angaben zur Positionierung. Sie unterscheiden sich lediglich durch die `visibility`-Eigenschaft. Dadurch wird bewirkt, dass beide Bereiche an der gleichen Stelle angezeigt werden, der eine Bereich zunächst jedoch ausgeblendet bleibt, während der andere angezeigt wird.
Der dritte `<div>`-Bereich ist der Behälter für das anzuzeigende Bild. Er ist zunächst auch nicht sichtbar.

Die beiden ersten Bereiche enthalten jeweils einen Verweis. Beim Anklicken des Verweises wird jeweils eine JavaScript-Funktion aufgerufen, die im Kopf der Datei in einem JavaScript-Bereich definiert ist. Der Bereich, der zunächst angezeigt wird, enthält einen Verweis, bei dessen Anklicken die Funktion `Zeigen()` aufgerufen wird.

Die Funktion `Zeigen()` tut nichts anderes, als die Anzeigeverhältnisse unter den drei `<div>`-Bereichen zu ändern. Der erste Bereich, über dessen Verweis die Funktion aufgerufen wurde, wird mit `document.ZeigenVerweis.visibility = "hidden"` auf unsichtbar gesetzt. Der zweite Bereich, der mit dem anderen Verweis, wird dagegen auf sichtbar gesetzt. Auch der Bereich mit dem Bild wird sichtbar.
Nun werden der zweite Verweis ("Versteck das Bild") und das Bild selbst angezeigt. Beim Klicken auf den Verweis wird die andere JavaScript-Funktion `Verstecken()` aufgerufen. Diese Funktion arbeitet genau so wie die Funktion `Zeigen()`, nur umgekehrt.

Der Zugriff auf die `<div>`-Bereiche wird dadurch möglich, dass ihnen mit dem `id`-Attribut ein Name gegeben wird. Über `document.BereichName` ist dann der Zugriff auf Eigenschaften wie `visibility`, `top`, `left`, `width`, `height` oder `clip` möglich. So lassen sich praktisch alle Aufgaben lösen, ohne das `<layer>`-Tag einzusetzen.

### Beachten Sie:

Ein `layer`-Element lässt sich nur simulieren, wenn der `div`-Bereich absolut positioniert ist.

Sie können - wie im Beispiel - statt der `visibility`-Eigenschaften `hide` und `show` die Eigenschaften `hidden` und `visible` verwenden, da Netscape 4 diese Angaben ebenfalls korrekt interpretiert.

## Das Event-Objekt

Das Event-Objekt von JavaScript erlaubt es, auf Anwenderereignisse zu reagieren. Es stellt eine Erweiterung der klassischen Event-Handler dar. Das folgende Beispiel demonstriert die Möglichkeiten des Event-Objekts.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    <style type="text/css">
    layer { font-size:14px; font-family:Arial }
    layer.Kopf { color:#FFFFFF; padding:4px; cursor:hand; }
    layer.Text { color:#000000; padding-top:30px; padding-left:4px; padding-right:4px }
    </style>
    </head><body>

    <layer id="Gruen" class="Text" bgcolor="#99FF99" top="170" left="10" width="200" height="180">
    <layer id="Gruenkopf" class="Kopf" bgcolor="#000000" top="0" left="0" width="200" height="25">
    Titelleiste des grünen Layers
    </layer>
    Klicken Sie mal mit der Maus in die Titelleiste dieses Layers,
    halten Sie die Maustaste gedrückt und ziehen Sie dann die Maus an eine andere Stelle.
    </layer>
    <layer id="Gelb" class="Text" bgcolor="#FFFF66" top="10" left="310" width="300" height="120">
    <layer id="Gelbkopf" class="Kopf" bgcolor="#000000" top="0" left="0" width="300" height="25">
    Titelleiste des gelben Layers
    </layer>
    Klicken Sie mal mit der Maus in die Titelleiste dieses Layers,
    halten Sie die Maustaste gedrückt und ziehen Sie dann die Maus an eine andere Stelle.
    </layer>

    <script type="text/javascript">
    Gruen = document.layers["Gruen"];
    Gruentitel = document.layers["Gruen"].document.layers["Gruenkopf"].document;

    Gelb = document.layers["Gelb"];
    Gelbtitel = document.layers["Gelb"].document.layers["Gelbkopf"].document;

    Gruentitel.captureEvents(Event.MOUSEUP | Event.MOUSEDOWN | Event.MOUSEDRAG);
    Gruentitel.onmousedown = StartGruen;
    Gruentitel.onmouseup = EndGruen;
    document.layers["Gruen"].document.layers["Gruenkopf"].onload = GruenReset;

    Gelbtitel.captureEvents(Event.MOUSEUP | Event.MOUSEDOWN | Event.MOUSEDRAG);
    Gelbtitel.onmousedown = StartGelb;
    Gelbtitel.onmouseup = EndGelb;
    document.layers["Gelb"].document.layers["Gelbkopf"].onload = GelbReset;

    function GruenReset () {
      Gruentitel.captureEvents(Event.MOUSEUP | Event.MOUSEDOWN | Event.MOUSEDRAG);
    }

    function GelbReset () {
      Gelbtitel.captureEvents(Event.MOUSEUP | Event.MOUSEDOWN | Event.MOUSEDRAG);
    }

    function StartGruen () {
      Gruentitel.captureEvents(Event.MOUSEMOVE);
      Gruentitel.onmousemove = ZiehGruen;
    }

    function StartGelb () {
      Gelbtitel.captureEvents(Event.MOUSEMOVE);
      Gelbtitel.onmousemove = ZiehGelb;
    }

    function ZiehGruen (Ereignis) {
      Gruen.left = Ereignis.pageX;
      Gruen.top = Ereignis.pageY;
    }

    function ZiehGelb (Ereignis) {
      Gelb.left = Ereignis.pageX;
      Gelb.top = Ereignis.pageY;
    }

    function EndGruen () {
      Gruentitel.onmousemove = 0;
      Gruentitel.releaseEvents(Event.MOUSEMOVE);
    }

    function EndGelb () {
      Gelbtitel.onmousemove = 0;
      Gelbtitel.releaseEvents(Event.MOUSEMOVE);
    }
    </script>
    </body></html>

### Erläuterung:

Im Beispiel werden insgesamt vier Layer definiert, davon zwei "äußere" (mit `id="Gruen"` bzw. `id="Gelb"`) und zu jedem jeweils ein "innerer" (mit `id="Gruenkopf"` bzw. `id="Gelbkopf"`). Die inneren Layer sind so gestaltet, dass sie wie Titelleisten zu den jeweils äußeren Layern wirken, daher auch die id-Namen.

Wie Sie erkennen können, steht nirgendwo bei der Layerdefinition oder innerhalb eines der Layer ein JavaScript-Aufruf. Dennoch sind die beiden Titelleisten "sensitiv": wenn der Anwender mit der Maus darauf klickt, die Maustaste gedrückt hält und die Maus bewegt, bewegt sich der gesamte zugehörige "äußere" Layer mit. Der Grund dafür ist das Konzept des Event-Objekts. Es benötigt keine Event-Handler innerhalb von HTML, um JavaScript-Aktionen anzustoßen.

Der JavaScript-Bereich des obigen Beispiels enthält dafür einige "ungewohnte" Dinge. Er wird unterhalb der Layer definiert, weil gleich bei seinem Einlesen Code ausgeführt wird, der sich auf die definierten Layer bezieht. Die Layer müssen zu diesem Zeitpunkt bereits eingelesen sein, sonst gibt es eine Fehlermeldung.

Die ersten vier Zeilen des JavaScript-Codes im Beispiel speichern einfach nur ziemlich lange Objekt-Eigenschaften-Ketten in Variablen, da diese im weiteren Verlauf häufig notiert werden müssen. Danach folgen jeweils vier Anweisungen, und zwar je für den grünen Layer und für den gelben. Die Methode `captureEvents()` bewirkt, dass Anwenderaktionen überwacht und bei Eintritt gemeldet werden. Die Methode `captureEvents()` erwartet als Parameter einen Wert. Notieren Sie dazu nach dem Prinzip `Event.WELCHER` die Events, die überwacht werden sollen. Die gewünschten Events sind durch bitweises Oder (einfacher Vertikalstrich) zu trennen. Welche Events es neben denen im obigen Beispiel gibt, erfahren Sie in der JavaScript-Objektreferenz beim Objekt event.

Beim Eintritt von überwachten Ereignissen werden Funktionen aufgerufen. Beachten Sie dabei die etwas merkwürdige Syntax: mit einer Anweisung wie `Gruentitel.onmousedown = StartGruen` wird die selbstgeschriebene Funktion `StartGruen()` aufgerufen, die weiter unten im Script definiert ist. Beim Aufruf dürfen Sie in diesem Fall jedoch keine Klammern hinter dem Funktionsnamen notieren!

Verfolgen Sie nun mal im Beispiel den Fall, dass der Anwender auf die Titelleiste des grünen Layers klickt. Dann wird das Ereignis `MOUSEDOWN` für `Gruentitel` gemeldet. Für diesen Fall (`onmousedown`) wird die Funktion `StartGruen` aufgerufen. Innerhalb dieser Funktion wird wiederum überwacht, ob der Anwender die Maus bei gedrückter Maustaste bewegt. Wenn ja, wird dort nach dem gleichen Schema die Funktion `ZiehGruen` aufgerufen. Obwohl die Funktion keinen Parameter übergeben bekommt, erwartet sie einen - auch das gegen alle sonstige Regeln. Der erwartete Parameter ist aber kein "Wert" wie sonst üblich, sondern einfach ein Name für den aktuellen Event. Im Beispiel wurde der Name `Ereignis` gewählt. Unter dem vergebenen Namen lassen sich Eigenschaften des Event-Objekts ansprechen. Da innerhalb der Funktion `ZiehGruen` davon Gebrauch gemacht wird, ist ein solcher Name erforderlich. Aktiv ist die Funktion `ZiehGruen` solange, wie der Anwender die Maustaste bewegt und nicht loslässt. Während dieser Zeit werden "so oft wie möglich" die Eigenschaften `PageX` (aktuelle Mausposition von links) und `PageY` (aktuelle Mausposition von oben) von `Ereignis` abgefragt. Diese Werte werden dem betroffenen Layer dynamisch als neue Werte für die linke obere Ecke zugewiesen. So entsteht der Bewegungseffekt.

Wenn der Anwender die Maustaste loslässt, wird die Funktion `ZiehGruen` sofort verlassen. Da die Event-Überwachung ja noch aktiv ist, wird jetzt das Ereignis `MOUSEUP` gemeldet. Für diesen Fall wird die Funktion `EndGruen` aufgerufen. Diese Funktion enthält zwei Befehle zum "Aufräumen".

Wenn Sie sonst nichts weiter unternehmen würden, wäre der Layer nach dem ersten Bewegen nicht mehr bewegungsfähig. Damit er immer wieder bewegbar ist, tritt automatisch ein LOAD-Ereignis ein. Dieses wird mit `onload` abgefangen. Dabei wird die Funktion `GruenReset` aufgerufen. Diese Funktion startet die erneute Überwachung der Ereignisse.

Analog zu dem Handling für den grünen Layer wird mit dem Handling für den gelben Layer verfahren.

## Inline-Scripts bei Layern

Netscape bietet eine vereinfachte JavaScript-Syntax an, um Layer-Eigenschaften innerhalb eines Layers dynamisch zu ändern.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    <style type="text/css">
    layer { padding:5px; }
    p.Verweis { font-size:14px; font-weight:bold; font-family:Arial; color:yellow; }
    p.Text { font-size:14px; font-family:Arial; color:white; }
    </style>
    </head><body>
    <layer class="Kopf" bgcolor="#000000" top="175" left="50" width="500" height="200"
    clip="0,0,500,25" onmouseover="Zeigen()" onmouseout="Verstecken()">
    <p class="Verweis">Was Sie schon immer wissen wollten über ...</p>
    <p class="Text"><span style="color:red; font-size:64px">SECHS</span><br>
    Es handelt sich dabei einfach um eine Zahl, die exakt ein halbes Dutzend bezeichnet.</p>
    <script type="text/javascript">
    function Zeigen () {
      clip.bottom = 200;
    }

    function Verstecken () {
      clip.bottom = 25;
    }
    </script>
    </layer>
    </body></html>

### Erläuterung:

Im Beispiel wird ein Layer definiert. Mit dem `clip`-Attribut wird der Anzeigebereich des Layers jedoch zunächst beschnitten, und zwar so, dass gerade der erste Textabsatz sichtbar ist. Wenn der Anwender mit der Maus über den sichtbaren Layer-Bereich fährt, wird die JavaScript-Funktion `Zeigen()` aufgerufen. Diese Funktion verändert den Clip-Bereich des Layers so, dass er in ganzer Größe angezeigt wird. Wenn die Maus den Layer-Bereich wieder verlässt, wird die Funktion `Verstecken()` aufgerufen. Diese Funktion ändert den Clip-Bereich wieder auf den Anfangswert.

Wichtig ist bei dieser Form, dass der JavaScript-Bereich innerhalb des Layers definiert wird. Dann brauchen Sie sich nicht um die korrekte Adressierung des Layers mit Indexnummern oder Namen zu kümmern. Sie können einfach Anweisungen wie `clip.bottom = [Wert]` (wie im Beispiel) oder Eigenschaften wie `top`, `left` oder `bgColor` notieren, um Wirkungsweise und Aussehen des Layers zu verändern. Welche Eigenschaften Sie ändern können, entnehmen Sie der Referenz zum Objekt layers.

| Datenanbindung (nur Microsoft)
| Das ältere DHTML-Modell von Microsoft

© 2007 Impressum