Sie sind hier: Workshops DHTML-Workshop

DHTML-Workshop

DHTML-Workshop: 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.




 Zurück zu: Workshops