|
DHTML:
Gesamtüberblick und Quellcode
mit Erklärung
In den kommenden Zeilen werde
ich ein DHTML-Skript sehr genau behandeln und jedes Stück
des Codes erklären, damit dies auch nachvollziehbar ist:
<html>
<head><script language="JavaScript">
<!--
Im folgenden Teile werden die Variablen definiert die es ermöglichen
den benutzten Browser auszulesen und das Skript und die Funktionen/Tags
anzupassen.
var bName=navigator.appName;
var bVer=parseInt(navigator.appVersion);
var NS4=(bName=="Netscape" && bVer>=4);
var IE4=(bName=="Microsoft Internet Explorer" &&
bVer>=4);
Der Funktion
start wird aus dem Onload-Event ein Wert "mitgeliefert",
dieser heißt jetzt name und steht für die ID des gewünschten
Layers. In der Funktion wird der Layer bzw. das Objekt definiert
damit man in weiteren Funktionen auf die Eigenschaften der
Layer/Ebenen zugreifen kann.
function start(name)
{
if (NS4)
{
objekt1=eval("document."+name);
};
if (IE4)
{objekt1=eval("document.all."+name+".style");
}
In der folgenden
Funktion bewege wird bei Aufruf das Layer an eine bestimmte
Stelle bewegt. Der Name und die zu addierenden x und y Koordinaten
werden der Funktion übergeben um darin weiterverwendet werden
zu können. Diese Funktion die sich durch SetTimeOut nach 50
Millisekunden selbst aufruft, arbeitet solange die darin enthaltenen
Befehle ab bis die Ebene 650 Pixel vom linken Browserrand
entfernt ist.
In dem Beispiel werden die Koordinaten 2 und 2 (x,y) übergeben,
das bedeutet das zur aktuellen Position jeweils 2 für den
x-Wert und 2 für den y-Wert addiert werden, jedoch nur solange
bis die linke Ebene (ebene.left) bei 650 Pixeln angelangt
ist. Die Funktion parseInt ist nötig um das vom Internet Explorer
erstellte Anhängsel "px" (Pixel) an dem Zahlenwert
für die Position abzuschneiden. ( 100px -> 100 )
function bewege(ebene,x,y){
if(parseInt(ebene.left)<650)
{
ebene.linkeposition=parseInt(ebene.left);
ebene.topposition=parseInt(ebene.top);
ebene.linkeposition+=x;
ebene.topposition+=y;
ebene.left=ebene.linkeposition;
ebene.top=ebene.topposition;
a=ebene;
b=x;
c=y;
setTimeout("bewege(a,b,c)",50);
}
}
Die folgenden
Funktion position arbeitet nach dem selben Prinzip wie die
Funktion bewege, ausser daß die Funktion sich nicht selbst
aufruft und die Position sich sofort ohne Animation ändert.
Die Werte werden wieder an die Funktion übergeben und der
x und y-Wert wird zu der aktuellen Position addiert und die
Ebene wird auf die neue Position geschoben.
function position(ebene,x,y)
{
ebene.linkeposition=parseInt(ebene.left);
ebene.topposition=parseInt(ebene.top);
ebene.topposition+=x;
ebene.linkeposition+=y;
ebene.top=ebene.topposition;
ebene.left=ebene.linkeposition;
}
Mit beiden
folgenden Funktion ist es möglich eine Ebene zu verstecken
bzw. anzuzeigen, dies geschieht bei Aufruf der Funktion (also
zum Beispiel durch einen Link). Auch hier ist eine Cross-Browser-Lösung
nötig, da der Internet Explorer und Netscape Navigator unterschiedliche
Befehle dazu nutzen. Hierfür wird eine If-Abfrage der oben
aufgeführten Variablen durchgeführt.
function verstecke(ebene)
{
if (NS4) ebene.visibility="hide";
if (IE4) ebene.visibility="hidden";
}
function zeige(ebene)
{
if (NS4) ebene.visibility="show";
if (IE4) ebene.visibility="visible";
}
//-->
</script>
Funktionsaufrufe,
nutzbar als Links (<a href="...">Aufruf</a>)
oder als OnmouseOver ( onmouseover="...") oder ähnliches:
Layer
anzeigen/verstecken
javascript:zeige(objekt1)
javascript:verstecke(objekt1)
Layer
bewegen:
javascript:bewege(objekt1,2,1.2)
Layerposition
verändern:
javascript:position(objekt1,50,20)
|
