|
DHTML ist eine Erweiterung von HTML und dient zur Gestaltung von animierten Internetseiten. DHTML-Skripte besteht hauptsächlich aus Cascading Style Sheets und HTML4 und zur Animation der Objekte wird auf die Eigenschaften per Javaskript zugegriffen. Ein paar einfache Kniffe zeige ich in dem kommenden Workshop, vorerst werde ich nur Ebenen und deren Positionierung behandeln. Aber auch damit kann man schon allerhand "basteln", wie zum Beispiel Navigationsmenüs.
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"..."
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
var IE4=(browser=="Microsoft Internet Explorer" && browserVer
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"
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.
DHTML: Ebenen positionieren
Die Positionierung der Ebene erfolgt entweder relativ oder absolut. Absolut geht von einer Positionierung von linken oberen Rand aus (Werte sind dann 0 ) und die relative Positionierung hängt von der aktuellen Position ab.
Bei der absoluten Positionsänderung wird der Ebene einfach ein neuer Wert zugeordnet. Die Zuordnung erfolgt mit einem kleinen Javaskript :
function div_absolut(ebene){
ebene.top=200;
ebene.left=100;
}
Mit ebene.top wird der Abstand der Ebene vom oberen Rand der Wert (200 Pixel) neu definiert. Und mit ebene.left geschieht dies für die Positionierung vom linken Bildrand (100 Pixel).
Die relative Positionierung geschieht in Abhängigkeit von der ursprünglichen Position und es wird einfach der Wert, der der Funktion übergeben wurden, dazuaddiert.
function position(ebene,x,y){
ebene.toppos=parseInt(ebene.top);
ebene.leftpos=parseInt(ebene.left);
ebene.toppos+=x;
ebene.leftpos+=y;
ebene.top=ebene.toppos;
ebene.left=ebene.leftpos;
}
Und der Aufruf erfolgt durch einen einfachen Link auf die Funktion :
<a href="javascript:position(objekt,30,10)"
Im Beispiel wird die Position vom linken Rand um 10 (y) verändert und für den oberen Rand um 30 (x).
Da der Internet Explorer als Wert für ebene.top einen Anhang mitliefert (z.B.:100px) und dazu muß mit parseInt zuvor dieser Anhang abgeschnitten werden damit nur der reine Zahlenwert genutzt wird.
DHTML: Ebenen anzeigen und verstecken
Ebenen können nicht nur bewegt und positioniert werden, sondern auch mit einem Klick versteckt und auch angezeigt werden. Leider verarbeiten auch hier der Internet Explorer und Netscape Navigator die Befehle unterschiedlich, aus diesem Grund muß man wiederrum ein kleines Javaskript einsetzen.
Die Funktion zum Verstecken einer Ebene lautet:
function verstecke(ebene)
{
if (NS4) ebene.visibility="hide";
if (IE4) ebene.visibility="hidden";
}
Und die Funktion zum Anzeigen der Ebene:
function zeige(ebene)
{
if (NS4) ebene.visibility="show";
if (IE4) ebene.visibility="visible";
}
Und jetzt wird noch ein Link eingefügt. Der HREF-Bereich kann auch für OnMouseOver-Befehle genutzt werden.
<a href="javascript:verstecke(objekt1)"
<a href="javascript:zeige(objekt1)"
|
