SELFHTML/Quickbar
Dynamisches HTML
Die Ansätze von Microsoft und Netscape SELFHTML/Quickbar
Dynamisches HTML
Die Ansätze von Microsoft und Netscape
Dynamisches Positionieren bei Netscape"Dynamisches HTML" - das ist bei Netscape nicht wie beim MS Internet Explorer der beliebige nachträgliche Zugriff auf alle Elemente einer HTML-Datei. Sie können mit Netscape also nicht wie beim MS Internet Explorer nachträglich einen Textabsatz, der mit <p>...</p> definiert ist, ohne weiteres völlig anders formatieren, oder in eine Überschrift 1. Ordnung verwandeln. Eine nahezu vollständige Umsetzung des Document Object Models in JavaScript, wie sie beim MS Internet Explorer mit Hilfe des all-Objekts realisiert ist, gibt es bei Netscape nicht.
Dynamisches HTML gibt es bei Netscape 4.x nur im Zusammenhang mit positionierten Elementen. Deshalb ist hier auch von "Dynamischem Positionieren" die Rede. 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>-Tag 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>-Tag. Wenn man auf das <layer>-Tag 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.
Sämtliche Beispiele auf dieser Seite funktionieren nur mit Netscape ab der Version 4.x.
 
|
Layer-Bereiche dynamisch anzeigen/verstecken
Anzeigebeispiel: So sieht's aus
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 "Diashow" 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.
<html>
<head>
<title>Titel der Datei</title>
<script language="JavaScript">
<!--
var AktuellerText = 1;
var Texte = 4;
function NextText()
{
++AktuellerText;
if(AktuellerText > Texte) AktuellerText = 1;
for(i=0;i<Texte;i++)
document.layers[i].visibility = "hide";
document.layers[AktuellerText-1].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,San-Serif;
font-size:14pt; font-weight:bold; padding:5mm"> Das ist der erste Text</p>
</layer>
<layer visibility=hide top=150 left=50 width=400 height=125 bgcolor=#DDFFDD>
<p style="color:#006600; font-family:Arial,Helvetica,San-Serif;
font-size:14pt; font-weight:bold; padding:5mm"> Das ist der zweite Text</p>
</layer>
<layer top=275 left=50 width=400 bgcolor=#DDFFDD>
<center><form>
<input type=button value=" weiter >> " onClick="NextText()">
</form></center>
</layer>
</body>
</html>
|
Im Körper der Beispiel-HTML-Datei werden insgesamt drei Layer definiert. Der erste und der zweite Layer enthalten Texte, die dynamisch wechseln sollen. Der dritte 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, daß der jeweils nächste Text angezeigt wird.
Beachten Sie, daß die ersten beiden 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 beiden Layern die gleichen. Die beiden Layer unterscheiden sich lediglich durch die Angabe von visibilty=. Der erste Layer wird mit visibilty=show auf "sichtbar" gesetzt, der zweite Layer mit visibilty=hide auf "unsichtbar". Dadurch wird erreicht, daß zunächst nur der erste Layer am Bildschirm angezeigt wird.
Der dritte 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 Nummer des aktuellen Textes gespeichert. In Texte wird die Anzahl der dynamisch austauschbaren Texte gespeichert. Sie könnten anstelle der zwei Layer mit Texten auch 10 oder 100 solcher Layer definieren. Entsprechend der Anzahl der definierten Layer müßten 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 Diashow-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 Kontoll-Buttons, jedoch so, daß der Layer mit dem Kontroll-Button über dem unteren Teil des Layers mit dem Text liegt. Der Grund dafür ist, daß 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 Anzeigebeispiel: So sieht's aus
Sie können Layer so positionieren, daß diese sich überlappen. Das macht 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, daß 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".
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
layer.Kopf { text-align:right }
layer.Text { padding:5px }
</style>
<script language="JavaScript">
<!--
var aktiv = "Home";
function Hervorheben(neu_aktiv)
{
document.layers['Infos'].zIndex = 1;
document.layers['News'].zIndex = 2;
document.layers['Home'].zIndex = 3;
document.layers[aktiv].bgColor = "#CCCCCC";
document.layers[aktiv].layers[0].bgColor = "#666666";
document.layers[aktiv].layers[1].visibility = "hide";
document.layers[neu_aktiv].zIndex = 4;
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 link=#FFFFFF vlink=#FFFFFF alink=#FFFFFF text=#000000>
<layer id="Infos" top=155 left=70 width=360 height=230 bgcolor=#CCCCCC>
<layer class="Kopf" width=360 height=25 bgcolor=#666666>
<a href="javascript:Hervorheben('Infos')">Infos</a>
</layer>
<layer class="Text" top=25 visibility=hide>
Hier stehen die Infos
</layer>
</layer>
<layer id="News" top=180 left=130 width=360 height=230 bgcolor=#CCCCCC>
<layer class="Kopf" width=360 height=25 bgcolor=#666666>
<a href="javascript:Hervorheben('News')">News</a>
</layer>
<layer class="Text" top=25 visibility=hide>
Hier stehen die News
</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>
Hier steht der Einstiegstext
</layer>
</layer>
</body>
</html>
|
Im Beispiel werden drei "große" Layer definiert: einer für Infos, einer für News, und einer für "Home", was bedeuten soll, daß 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, daß innerhalb der Layer für Infos, News und Home 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, daß 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 plazieren.
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 Attribut id= 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, daß 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 Atrribute 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.
|
|
Layer-Bereiche dynamisch bewegen Anzeigebeispiel: So sieht's aus
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.
<html>
<head>
<title>Titel der Datei</title>
<script language="JavaScript">
<!--
function hBeweg(LayerNum,bis_links,Pixel,Pause)
{
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)
{
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 link=#FF0000 vlink=#FF0000 alink=#000000 text=#000000>
<layer left=10 top=10 width=450 height=150>
<p>Springe nach:
<a href="javascript:document.layers[0].moveTo(10,10)">links oben</a> |
<a href="javascript:document.layers[0].moveTo(260,10)">rechts oben</a> |
<a href="javascript:document.layers[0].moveTo(10,260)">links unten</a> |
<a href="javascript:document.layers[0].moveTo(260,260)">rechts unten</a><br>
Bewege nach:
<a href="javascript:hBeweg(0,10,4,2)">links</a> |
<a href="javascript:hBeweg(0,260,4,2)">rechts</a> |
<a href="javascript:vBeweg(0,10,4,2)">oben</a> |
<a 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 muß 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 Layerinhalt 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, muß 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, daß die Funktion sich auch wieder mit den von ihr erwarteten Parametern aufrufen muß. 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, die die Funktion beim Neuaufruf mit tatsächlichen Werten versorgt.
Die übrigen Anweisungen in den beiden Funktionen dienen zur Kontrolle des Bewegungsablaufs, vor allem dazu, daß 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 muß 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. Die besondere Herausforderung bei alledem ist jedoch weniger das Anwenden von Formeln in JavaScript, sondern das Umsetzen der Formelergebnisse in Treppeneffekte - denn Sie können einen Layer nun mal nicht um die Zahl Pi bewegen, sondern immer nur um eine Anzahl von Pixeln horizontal und vertikal.
|
|
Layer-Bereiche dynamisch vergrößern/verkleinern Anzeigebeispiel: So sieht's aus
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.
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
layer.Text { padding:5px; font-size:14pt;
font-family:Arial,Helvetica,Sans-Serif; color:#FFFFFF }
layer.Kopf { padding:5px; font-size:10pt;
font-family:Arial,Helvetica,Sans-Serif; font-weight:bold; }
a:link, a:visited, a:active { color:#FFFFE0; }
</style>
<script language="JavaScript">
<!--
var Status = new Array("zu","zu","zu");
function AufUndZu(LayerNum)
{
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 bgcolor=#FFFFFF>
<layer class="Text" left=10 top=170 width=198 height=250 bgcolor=#000099 clip="0,0,198,2">
Inhalt des linken aufklappbaren Layers
</layer>
<layer class="Text" left=210 top=170 width=198 height=250 bgcolor=#994000 clip="0,0,198,2">
Inhalt des mittleren aufklappbaren Layers
</layer>
<layer class="Text" left=410 top=170 width=198 height=250 bgcolor=#008000 clip="0,0,198,2">
Inhalt des rechten aufklappbaren Layers
</layer>
<layer class="Kopf" left=10 top=145 width=198 height=25 bgcolor=#000000>
<a href="javascript:AufUndZu(0)">Verweis links</a>
</layer>
<layer class="kopf" left=210 top=145 width=198 height=25 bgcolor=#000000>
<a href="javascript:AufUndZu(1)">Verweis Mitte</a>
</layer>
<layer class="kopf" left=410 top=145 width=198 height=25 bgcolor=#000000>
<a href="javascript:AufUndZu(2)">Verweis rechts</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äßt 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, daß 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 Anzeigebeispiel: So sieht's aus
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, daß 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.
<html>
<head>
<title>Titel der Datei</title>
<script language="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 bgcolor=#FFFFFF>
<layer id="Input" bgcolor=#EEEEFF style="padding:5mm"
left=10 top=140 width=280 height=280>
<p>Geben Sie in dem Feld Text ein und klicken Sie dann auf "Interaktion"</p>
<form name="Eingabe">
<textarea name="Feld" cols=25 rows=6 wrap=virtual></textarea><br>
<input type="button" value="Interaktion" width=221 onClick="DatenSchreiben()">
</form>
</layer>
<layer id="Output" left=310 top=145 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, daß 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, daß 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 daß 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, daß 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 dürfen 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. Elemente innerhalb eines Layers müssen Sie auf diese Weise ansprechen. 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>-Tag simulieren Anzeigebeispiel: So sieht's aus
Unter dem Druck von Microsoft und angesichts der Tatsache, daß das W3-Konsortium keine Anstalten macht, das <layer>-Tag und damit die Grundlage für Dynamisches HTML nach dem Netscape-Ansatz in den HTML-Standard zu übernehmen, hat Netscape die Fähigkeit zum Dynamischen Positionieren auch auf die beiden "abstrakten" HTML-Tags <div>...</div> und <span>...</span> ausgedehnt. Wenn Sie innerhalb solcher HTML-Tags mit Hilfe Style-Sheet-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.
<html>
<head>
<title>Titel der Datei</title>
<script language="JavaScript">
<!--
function Zeigen()
{
document.BildAnzeige.visibility = "show";
document.ZeigenVerweis.visibility = "hide";
document.VersteckenVerweis.visibility = "show";
}
function Verstecken()
{
document.BildAnzeige.visibility = "hide";
document.VersteckenVerweis.visibility = "hide";
document.ZeigenVerweis.visibility = "show";
}
//-->
</script>
</head>
<body bgcolor=#FFFFFF>
<div id="ZeigenVerweis"
style="position:absolute; left:100; top:140; width:400; height:30; visibility:show">
<a href="javascript:Zeigen()"><b>Zeig das Bild an</b></a>
</div>
<div id="VersteckenVerweis"
style="position:absolute; left:100; top:140; width:400; height:30; visibility:hide">
<a href="javascript:Verstecken()"><b>Versteck das Bild</b></a>
</div>
<div id="BildAnzeige"
style="position:absolute; left:100; top:170; width:400; height:230; visibility:hide">
<img src="dasbild.jpg" width=91 height=177 border=0>
</div>
</body>
</html>
|
Das Beispiel bewirkt, daß 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äßt sich das Bild immer wieder ein- und ausblenden.
In dem Beispiel werden dazu innerhalb des Dateikörpers drei Bereiche mit <div>...</div> definiert. Alle drei einleitenden <div>-Tags enthalten Style-Sheet-Angaben zur Positionierung. Ohne solche Angaben ist bei Netscape kein dynamischer Zugriff auf das entsprechende Element möglich.
Die beiden ersten <div>-Bereiche im Beispiel haben die gleichen Angaben zur Positionierung. Sie unterscheiden sich lediglich durch die Wertzuweisung bei der Angabe visibility=. Dadurch wird bewirkt, daß beide Bereiche an der gleichen Stelle angezeigt werden, der eine Bereich zunächst jedoch ausgeblendet bleibt, während der andere angzeigt 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="hide" 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, daß bei der Definition der <div>-Bereiche mit id= ein Name vergeben 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. In der Praxis kommt es allerdings immer wieder mal zu Problemen, die bei Verwendung von Layern nicht auftreten.
|
|
Das Event-Objekt Anzeigebeispiel: So sieht's aus
Das Event-Objekt von JavaScript erlaubt es, auf Anwendereignisse zu reagieren. Es stellt eine Erweiterung der klassischen Event-Handler dar. Das folgende Beispiel demonstriert die Möglichkeiten des Event-Objekts.
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
layer { font-size:10pt; font-family:Arial }
layer.Kopf { color:#FFFFFF; padding:1mm; cursor:hand; }
layer.Text { color:#000000; padding-top:30px; padding-left:1mm; padding-right:1mm }
</style>
</head>
<body bgcolor=#FFFFFF>
<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>
Inhalt des grünen Layers.
</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>
Inhalt des gelben Layers.
</layer>
<script language="JavaScript">
<!--
var Gruen = document.layers['Gruen'];
var Gruentitel = document.layers['Gruen'].document.layers['Gruenkopf'].document;
var Gelb = document.layers['Gelb'];
var 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, daß 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, daß 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 Objekt-Referenz 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, daß der Anwender auf die Titelleiste des grünen Layers klickt. Dann wird das Ereginis 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äßt. 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äßt, wird die Funktion ZiehGruen sofort verlassen. Da die Event-Überwachung ja noch aktiv ist, wird jetzt das Ereginis 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 Anzeigebeispiel: So sieht's aus
Netscape bietet eine vereinfachte JavaScript-Syntax an, um Layer-Eigenschaften innerhalb eines Layers dynamisch zu ändern.
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
layer { padding:1mm; }
p.Verweis { font-size:10pt; font-weight:bold; font-family:Arial; color:yellow; }
p.Text { font-size:10pt; font-family:Arial; color:white; }
</style>
</head>
<body bgcolor=#FFFFFF>
<layer 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">Hier steht das, was Sie schon immer wissen wollten.</p>
<script language="JavaScript">
<!--
function Zeigen() { clip.bottom = 200; }
function Verstecken() { clip.bottom = 25; }
//-->
</script>
</layer>
</body>
</html>
|
Im Beispiel wird ein Layer definiert. Mit einer Angabe zu clip= wird der Anzeigebereich des Layers jedoch zunächst beschnitten, und zwar so, daß gerade der erste Textabsatz sichtbar ist. Wenn der Anwender mit der Maus über den sichtaben Layer-Bereich fährt, wird die JavaScript-Funktion Zeigen() aufgerufen. Diese Funktion verändert den Clip-Bereich des Layers so, daß er in ganzer Größe angezeigt wird. Wenn die Maus den Layerbereich wieder verläßt, wird die Funktion Verstecken() aufgerufen. Diese Funktion ändert den Clip-Bereich wieder auf den Anfangswert.
Wichtig ist bei dieser Form, daß 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 Anweisungen 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 Layer-Objekt.
|
| |
weiter: |
Datums-/Uhrzeitanzeige
|
zurück: |
JSSS JavaScript Style-Sheets (Netscape)
|
SELFHTML/Quickbar
Dynamisches HTML
Die Ansätze von Microsoft und Netscape
