Sie sind hier: Workshops DHTML-Workshop

DHTML-Workshop

DHTML-Workshop: Zusammenfassung

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)




 Zurück zu: Workshops