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/versteckenSie 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.
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 >> "
onClick="NextText()"></form></center>
</layer>
</body></html>
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.
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 überlappenSie 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".
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>
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.
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 bewegenSie 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.
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>
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".
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/verkleinernDurch 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.
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>
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 austauschenEinen 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.
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>
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, so dass 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).
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 simulierenUnter 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.
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>
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.
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-ObjektDas 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.
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>
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 LayernNetscape bietet eine vereinfachte JavaScript-Syntax an, um Layer-Eigenschaften innerhalb eines Layers dynamisch zu ändern.
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>
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
|
 SELFHTML/Navigationshilfen Dynamisches HTML DHTML-Modelle |
|
© 2005 Impressum