|
DHTML: Ebenen
Seit
den 4er Versionen der beiden großen Browser gibt es die Möglichkeit
Ebenen als Designhilfe zu nutzen. Diese kann man beliebig
mit Inhalten füllen, überlappen, ein- und ausblenden. Und
was sonst nur mit Tabellen und Pixelgrafiken möglich war,
eine genaue Positionierung innerhalb der Seite.
Und
per Javaskript kann auf diese Positionierung zugegriffen werden
und dies gibt dutzende von neuen Designmöglichkeiten.
Eine
Ebene wird mit dem DIV-Tag erstellt :
<DIV
ID="name" style"...">Das ist eine Ebene</DIV>
Und
mit dem Style-Befehl innerhalb des DIV-Tags kann man das Aussehen
und die Positionierung der Ebene (fast) beliebig bestimmen.
Leider
greift der Internet Explorer anders auf die Ebene zu als der
Netscape Navigator. Aus diesem Grund muß man ein Javaskript
benutzen welches für beide Browser nutzbar ist.
Der
Navigator 4 benutzt folgende Anweisung: document.name
Und auf das Aussehen greift er mit : document.name.eigenschaft
Und
der Explorer benutzt dafür folgende Zeile : document.all.name
Um das Aussehen zu beeinflussen wird folgende Zeile
benutzt :
document.all.ebenenID.style.eigenschaft
Folgendes
Skript definiert die Ebene für beide Browser korrekt :
<SCRIPT
language="JavaScript">
<!--
var browser=navigator.appName;
var browserVer=parseInt(navigator.appVersion);
var NS4=(browser=="Netscape" && browserVer>=4);
var IE4=(browser=="Microsoft Internet Explorer"
&& browserVer>=4);
function ebene(name){
if (NS4) objekt=eval("document."+name);
if (IE4) objekt=eval("document.all."+name+".style");
}
//-->
</SCRIPT>
Die Funktion ebene
wird jetzt noch im Body-Tag geladen, also erst dann wenn die
gesamte Seite bereits geladen wurde.
<body
onload="ebene('name_der_ebene')">
Die Positionierung erfolgt mit
:
<div ID="name"
style="position:absolute; left:100; top:100">Ebenfalls
eine Ebene</div>
Mit LEFT wird der
Abstand vom linken Rand bestimmt und mit TOP der Abstand vom
oberen Browserrand. Das Beispiel hat als den Namen "name"
und 100 Pixel Abstand vom linken und vom oberen Browserrand.
Die Weite und die Höhe eines Layers kann leider nur bei dem
Internet Explorer angegeben werden.
DEMO
l DHTML-Workshop l Weiter
|
