DHTML: Layer und Browser

Die Grundlage von DHTML auf der Seite von HTML sind die sogenannten Layer. Diese kann man sich in etwa wie eine eigene kleine Schicht innerhalb eines Dokumentes vorstellen die (in der Draufsicht) überhalb der anderen Elemente liegt. Ziel von DHTML ist es meist, diese Layer so zu manipulieren, dass sich deren Aussehen, Inhalt oder Verhalten ändert. Die größte Schwierigkeit sind dabei immer noch die Browser. Da die führenden Browserhersteller (Microsoft, Netscape, Opera) keine einheitlichen Systeme für den Zugriff und die Definition bieten wird man häufig gezwungen sein zwischen den einzelnen Browsern zu unterscheiden und Scripte ggf. in mehreren Versionen schreiben zu müssen.

Netscapes Layer (4.x)

Das wichtigste Element für DHTML in Netscapes Browsern ist das layer bzw. ilayer Element - allerdings auch nur in den Browser der 4er-Generation. Diese Elemente sind deshalb so wichtig für DHTML, weil sie erstmals nachträglich den direkten Zugriff auf den Inhalt eines HTML-Dokumentes boten. Der Unterschied zwischen layer und ilayer liegt in der Definition: das layer-Element gilt als Block-Element (wie z.B. blockquote oder p) wohingegen das ilayer-Element als Inline-Element (wie z.B. em oder font) gilt.

Beide Elemente haben folgende, für DHTML wichtige, Attribute:

und width

Attribut	Beschreibung
`name`	Name mit dem der Layer angesprochen werden kann.
`top`	Abstand des Layers zum Seitenanfang (layer) bzw. zum vorherigen Element (ilayer). *1
`left`	Abstand des Layers zum linken Seitenrand (layer) bzw. zum linken Element (ilayer).
`height`	Höhe und Breite des Layers.
`pagex`*1 und `pagey`	Ähnlich left und top.
`clip`	Anzeigebereich des Layers in Koordinaten.
`z-index`	Ebene der Layerschichten übereinander.
`background` und `bgcolor`	Hintergrundgrafik und Hintergrundfarbe des Layers.

*1 Wird dieses Attribut bei einem layer-Element definiert, so bewirkt es, dass der Layer an den Anfang der Seite angepasst wird. Wird es nicht definiert, verhält sich der Layer wie jedes Block-Element und gliedert sich nach dem letzten Element als Block ein.

Der Zugriff auf einen Layer innerhalb von JavaScript erfolgt entweder über document.layers[x], wobei x der nullbasierte Index des Layers ist, oder document.x, wobei x der im name-Attribut definierte Name des Layers ist. Darüber sind auch die Eigenschaften des Layers abrufbar. Beispiel:

document.meinLayer.top = 123;
document.meinLayer.left = 45;
document.meinLayer.bgcolor = 'red';
// usw.

Eine zusätzliche Schwierigkeit beim Zugriff auf einen Layer im Netscape Navigator 4.x kommt hinzu, wenn dieser innerhalb eines anderen liegt. Nehmen wir an, Layer B liegt innerhalb von Layer A, so muss, um auf B zuzugreifen zu können erst A adressiert werden. Da der Inhalt jedes Layers ein eigenes Dokument darstellt muss also der Inhalt ebenso behandelt werden. Beispiel:

<layer name="LayerA">
<layer name="LayerB">
... Inhalt ...
</layer>
</layer>

<script>
document.LayerA.document.LayerB.top = 123;
</script>

Microsofts Layer (4.x und höher)

Für die Browser von Microsoft ab der Version 4.0 benutzt man die Elemente div bzw. span als Layer. div ist vergleichbar mit Netscapes layer und span mit ilayer. Die Definition der Layereigenschaften geschieht hierbei nicht über Attribute sondern über Style-Angaben (CSS). Der Layer selbst wird mit dem id-Attribut mit einem Namen bezeichnet über den das Objekt mit document.all.x angesprochen werden kann, wobei x durch den definierten Namen der Layer-ID zu ersetzen ist. Die Style-Angaben werden über document.all.x.style.y angesprochen, wobei y durch die jeweilige Eigenschaft zu ersetzten ist. Simultan zu den Eigenschaften von Netscapes layer-Element die CSS-Eigenschaften zur Definition des Layers im Microsoft Internet Explorer:

Style-Eigenschaft	Beschreibung
`top`	Abstand des Layers zum Seitenanfang (div) bzw. zum vorherigen Element (span).
`left`	Abstand des Layers zum linken Seitenrand (div) bzw. zum linken Element (span).
`height` und `width`	Höhe und Breite des Layers.
`clip`	Anzeigebereich des Layers in Koordinaten.
`z-index`	Ebene der Layerschichten übereinander.
`background-image` und `background-color`	Hintergrundgrafik und Hintergrundfarbe des Layers.

Beispiel:

<div style="top:12px; left:34px; clip:rect(0px,0px,56px,78px)" id="meinDiv">
... Inhalt ...
</div>

<script>
document.all.meinDiv.style.left = '123px';
document.all.meinDiv.style.top = '456px';
document.all.meinDiv.style.height = '78px';
// usw.
</script>

Netscapes Layer (6.x)

Netscapes Browser ab der Version 6.0 verhalten sich nun wiederum ganz anders zum Vorgänger. Das layer und ilayer Element wird nun nichtmehr unterstützt, dafür kann nun das div bzw. span Element verwendet werden. Einziger Unterschied zum Microsoft Internet Explorer ist der Zugriff per JavaScript auf das jeweilige Objekt: Da document.all nicht unterstützt wird muss auf das nun neu hinzugekommeneDOMzurück gegriffen werden. Somit wird für den Zugriff document.getElementById(x) verwendet, wobei x durch die ID (id-Attribut) des jeweiligen Layers zu erstzten ist. Beispiel:

<div id="meinDiv"> ... Inhalt ... </div>

<script>
document.getElementById('meinDiv').style.left = '123px';
document.getElementById('meinDiv').style.top = '456px';
document.getElementById('meinDiv').style.height = '78px';
// usw.
</script>

Operas Layer (5.x)

Der Browser Opera ist in Sachen DHTML eher ein Nachzügler mit vielen Fehlern. Doch auch dieser Browser kann - wenn auch begrenzt - mit DHTML umgehen. Im Grunde genommen verhält sich die Version ab 5.0 so wie der Microsoft Internet Explorer ab 4.0 nur mit einigen kleinen Einschränkungen. Auch hier kann document.all.x in Verbindung mit div oder span Elementen verwendet werden um auf die einzelnen Layer zuzugreifen.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project