|
Layer sind von Netscape zur Ergänzung von HTML zu DHTML entwickelt worden. Leider funktionieren sie nur in den Netscape-Browsern vor Nummer 6. Die vorhandene Übersicht zu Layern in HTML soll hier um die JavaScript-Möglichkeiten ergänzt werden. Für diese gilt natürlich die gleiche Beschränkung auf ältere Netscape-Browser. JavaScript enthält ein Array layers[], über das der Zugriff auf Layer realisiert wird. Es folgt eine tabellarische Übersicht der Möglichkeiten. Mit den Groß-Browsern der Nummern 5 und größergibt es für den Zugriff auf HTML-Tags neue Möglichkeiten,die im Zusammenhang mit der Grafik-Ausgabe besprochen worden sind. Trotzdem muß ggf. fürdie älteren Netscape-User der Layer-Zugriff mit vorgesehenwerden.
Methoden und Eigenschaften von "layers" Das Array "layers" ist in Javascript Bestandteilvon document. Bei Anlage von Layern mit dem layeroder ilayer-Tag legt JavaScript eine Übersicht layers[num]an und adressiert sie mit 0 beginnend. Gleichzeitig erhaltenLayer üblicherweise im definierenden Tag einen Namen(name-Eigenschaft). Über beide, Zählungwie Benennung sind sie in JavaScript ansprechbar.
document.layers[num].Eigenschaft=wert
dummy=document.layers[num].Methode()
document.layerName.Eigenschaft=wert
dummy=document.layers[num].Methode() |
Auf Layer anwendbare Methoden
| captureEvents |
Ereignisse überwachen |
| handleEvent |
Ereignisse behandeln |
| load |
externe Datei laden |
| moveAbove |
über einen anderen layer legen |
| moveBelow |
unter einen anderen layer legen |
| moveBy |
bewegen um Anzahl Pixel |
| moveTo |
bewegen zu Positeon relaitv |
| moveToAbsolute |
bewegen zu Positeon absolut |
| releaseEvents |
Ereignisüberwachung beenden |
| resizeBy |
Breite und Höhe verändern um Anzahl Pixel |
| resizeTo |
Breite und Höhe auf Anzahl Pixel setzen |
| routeEvent |
Event-Handler-Hierarchie durchlaufen |
Eigenschaften von Layern
| above |
oberhalb liegender Layer |
| background |
Hintergrundbild eines Layers |
| bgColor |
Hintergrundfarbe eines Layers |
| below |
unterhalb liegender Layer |
| clip |
Anzeigebereich eines Layers |
| document |
document-Objekt eines Layers |
| left |
Links-Wert der linken oberen Ecke relativ |
| length |
Anzahl Layer |
| name |
Name eines Layers |
| pageX |
Links-Wert der linken oberen Ecke absolut |
| pageY |
Oben-Wert der linken oberen Ecke absolut |
| parentlayer |
Objekt des Eltern-Layers |
| siblingAbove |
Objekt des oberhalb liegenden Layers |
| siblingBelow |
Objekt des unterhalb liegenden Layers |
| src |
Externe Datei eines Layers |
| top |
Oben-Wert der linken oberen Ecke relativ |
| visibility (=inherit/show/hide) |
Sichtbarkeit eines Layers |
| zIndex |
Schichtpositeon eines Layers |
Anwendungsbeispiele
Nur für Layer-Besitzer!
Seitenelemente
verschwinden lassen
<script language=JavaScript>
function sichtbar()
{
if (document.laytext.visibility
== "show")
document.laytext.visibility
= "hide";
else document.laytext.visibility
= "show";
}
</script>
|
Diesen Effekt, hier mit ilayern, könnte man
für die Anlage von Menüs nutzen, bei denen Unterpunkte
zunächst verborgen bleiben sollen, wenn, ja wenn nicht
der ganze Platz reserviert bliebe.
Bewegte Elemente
Hier wird eine Bewegungsfunktion genutzt, die sich alle
70/1000 Sekunden selbst aufruft. Gestartet wird beim Laden
im Body-Tag. Unterhalb der Tabelle sind die beiden ilayer
definiert. Sie liegen im Entwurf um 100 Pixel verschoben
(nebeneinander). Man beachte die resultierende Verschiebung
der X-Achsen, die sich im Code zeigt.
<script language=JavaScript>
function krieche()
{
if (document.kurz.visibility=="show")
{
x=x+50; if(x>1000)x=0;
document.kurz.visibility="hide";
document.lang.visibility="show";
}
else
{
document.kurz.pageX = x;
document.lang.pageX = x-100;
document.kurz.visibility="show";
document.lang.visibility="hide";
}
window.setTimeout('krieche()',70);
}
</script>
Start:
<body onload="krieche();">
Die beiden layer:
<ilayer name="kurz" pageX=0 visibility="show">
<img SRC="bilder/r_kurz.gif"
height=30 width=150>
</ilayer>
<ilayer name="lang" pageX=0 visibility="hide">
<img SRC="bilder/r_lang.gif"
height=30 width=150>
</ilayer>
|
Wenn die Tierchen kriechen, kennt der Browser Layer!
| 
DIENSTE
