infos24 JavaScript > JavaScript Handbuch JavaScript und DHTML

Home / Tutorials / JavaScript Handbuch / JavaScript und DHTML

Was ist DHTML
Eine Schicht der HTML Seite ein aus ausblenden
Steuerung der visibibility mit z-index
Das Event an ein HTML Element binden
event handler auf das gesamte Dokument auf ein Objekt begrenzen

Was ist DHTML

nach oben

DHTML ist keine neue Programmiersprache, man kann wahrscheinlich nicht mal behaupten, dass es sich um ein neues, in sich geschlossenes System handelt. DHTML ist die Verschmelzung von JavaScript, cascading style sheet, dem Document Object Model Ansatz. Hinzugekommen ist noch die Idee, dass man eine HTML Seite in Schichten zerlegen kann und diese einzelnen Schichten einzeln ansprechen und manipulieren kann. Didaktisch gesehen ist es wohl so, dass man von DHTML immer dann spricht, wenn es um Grenzbereiche geht, also Technologien, die den geschlossenen Systemen wie cascading style sheet, JavaScript, dom nicht mehr eindeutig zugeordnet werden können. Wer will kann aber auch die Verbindung aus JavaScript und css oder die Verknüpfung von JavaScript und dem dom Ansatz als DHTML bezeichnen. In der Vergangenheit wurde DHTML von den verschiedenen Browser extrem unterschiedlich umgesetzt. Der im Zusammenhang mit XML entwickelte dom Ansatz führte dann aber zu einer gewissen Vereinheitlichung der Konzepte, wenn man es sich auch noch einheitlicher wünschen kann. Hier wird nur noch der allerneueste Standard beschrieben, in der Hoffnung, dass Netscape 4.XX, welcher ein stark abweichendes Modell vertreten hat, dass nicht mal Netscape 6.0 und höher weiterhin unterstützt, sich vom Markt verabschiedet.

Eine Schicht der HTML Seite ein aus ausblenden

nach oben

Wie bereits gesagt, läßt sich mit DHTML eine Seite in Schichten aufteilen. Man kann eine Schicht über eine andere legen oder auch eine Schicht komplett unsichtbar machen, wie dieses Beispiel zeigt. Der Skript, der das bewerkstelligt sieht so aus.

<html><head><title>test</title>
<script language=javaScript>
function zeigen()
{
document.getElementById("karotte").style.visibility="visible";
}
function nirvana()
{
}
function verstecken()
{
document.getElementById("karotte").style.visibility="hidden";
}
</script>
</head>
<body>
Das sieht man immer. Wenn er aber mit der mouse über das Wort test fährt, wird es lyrisch.<br><br>
<div id="karotte" style="visibility:hidden">
Sage mir auf welchem Pfade <br>
heute sie vorüberschreite<br>
dass ich aus der reichsten Lade<br>
zarte Seidenweben hole <br>
Rosen pflücke und Violen<br>
dass ich meine Wange reiche<br>
Schemel unter ihrer Sohle<br><br>
      STEFAN GEORGE
</div>
<A href=javascript:nirvana(); onMouseOver=zeigen(); onMouseOut=verstecken(); style="text-decoration:none"; >test. Get this emotion !!!! For free !!!</a>
</body></html>

Wie deutlich zu erkennen, ist das Verfahren ziemlich einfach. Wir sprechen, wie im Kapitel Zugriff auf Cascading Style Sheets mit JavaScript bereits besprochen, das entsprechende HTML Element an. Dieses wiederum hat ein Kindobjekt, nämlich style und dieses wiederum die Eigenschaft visibility. Die stellen wir auf visible, wenn wir mit der Maus auf die Schrift fahren und auf hidden, wenn wir die Maus wegbewegen. Es sein nochmals erwähnt, dass beide Browser hierfür auch proprietäre, nicht kompatible Ansätze haben, beide aber auch diese dritte, kompatible, Möglichkeit unterstützen. Da die proprietären Ansätze keine Zukunft haben, wird hier auch nicht weiter darauf eingegangen. Der hier beschriebene Ansatz funktionniert ab den sechser Versionen von Netscape respektive Explorer. Man kann das Beispiel ausbauen und mehrere Schichten übereinander legen von denen man dann man dann via Click eine nach der anderen sichtbar werden lässt. Wer nicht weiss, von was die Rede ist, kann hier clicken. Das Programm, das uns das auf den Schirm setzt, sieht dann so aus.

<html><head><title>test</title>
<script language=javaScript>
prolog=new Array();
prolog=document.getElementsByName("karotte");
var i=0;
var e=0;
function zeigen()
{
e=e+1;
for(i=0;i<prolog.length;i++)
{
if(e==i)
{prolog[i].style.visibility="visible";}
else {prolog[i].style.visibility="hidden";}
}
if(e ==prolog.length-1)
{e=-1;}
}
</script>
<style type=text/css>
#karotte
{
position:absolute;
top:50;
left:10;
background-color:yellow
}
</style>
</head>
<body>
Wer den Prolog im Himmel lesen will (Goethes Faust) der muss unten clicken.<br><br>
<div name="karotte" id="karotte" style="visibility:visible";>
Die Sonne tönt<br>
in alter Weise<br>
in Brudersphären Wettgesang<br>
</div>
<div name="karotte" id="karotte" style="visibility:hidden";>
und ihre vorgeschriebene Reise<br>
vollendet sie mit Donnergang<br>
ihr Anblick gibt den Engeln Stärke<br>
</div>
<div name="karotte" id="karotte" style="visibility:hidden";>
Wenn keiner sie ergründen mag<br>
Herr die unendlich hohen Werke<br>
sind herrlich wie am ersten Tag<br>
</div>
<div style="position:absolute;top:120;left:10">
<A href="javascript:void(0)"; onClick=zeigen();>test. Get this emotion !!!! For free !!!</a>
<div id="position"></div>
</body></html>

Es sei ohne jede weitere Diskussion konzediert, dass man ein solch einfaches Problem auch einfacher hätte lösen können, das wäre aber didaktisch nicht so wertvoll gewesen. Wir sehen also, dass drei divs übereinanderliegen, von denen zwei via visibility:hidden auf unsichtbar und einer via visibility:visible auf sichtbar gestellte wurde. Dies hat zur Konsequenz, dass wir bei Aufruf der Seite die ersten drei Verse des Gedichtes sehen. Clicken wir auf "test. Get this emotion !!!! For free !!" dann passiert grob folgendes. Der div (der eine!) der auf visible stand, wird auf hidden gestellt und der div, der auf diesen folgt, auf visible, so dass sich die Verse des Gedichtes hintereinander einblenden, mit jedem Click der nächste. Im Detail passiert folgendes. Mit

prolog=new Array();
prolog=document.getElementsByName("karotte");

ermitteln wir die Anzahl der HTML Elemente mit dem Namen "karotte" (drei an der Zahl). getElementByTagName("div") wäre weniger günstig gewesen, dann hätten wir nämlich noch einen erwischt, den letzten, den wir gar nicht haben wollen. getElementById() gibt überhaupt keinen Array zurück, weil nach dem DOM Ansatz eine Id einmalig ist, und folglich gar kein Array existiert. Wir sehen an diesem Beispiel nochmal, was schon an früherer Stelle beschrieben wurde. Für die css kann man mehrere id definieren, wie wir das hier tun. Für das Arbeiten mit dem dom Ansatz ist dies jedoch sinnlos, da nicht möglich. Prolog ist jetzt also ein Array mit drei Zeigern auf ein Element Objekt, genau genommen auf die drei divs, in denen das Gedicht steckt. Die Objekte, auf die die Zeiger verweisen, haben wiederum ein Kindobjekt, nämlich style, das wiederum, unter anderen, auch die Eigenschaft visibility hat. Bei jedem Aufruf der Funktion zeigen() wird der komplette Array Prolog durchlaufen. Da wir bei jedem Aufruf der Funktion einen Zähler mitlaufen lassen (e) wissen wir, welcher div auf visible und welche auf hidden gestellt werden müssen. So ist es möglich, den jeweiligen Vers visible zu machen und die anderen visible. Als Nebenbemerkung sein noch angemerkt, dass, wie bereits unter Zugriff auf Cascading Style Sheets mit JavaScript diskutiert, dies nur funktionnieren kann, wenn wir die Eigenschaft visibility nicht in einer css Formatierung festlegen sondern als Attribut des Elementes, was wir hier ja sowieso machen müssen, da ja ein div sichtbar, die anderen aber unsichtbar sein sollen. Es hätte bei diesem Beispiel noch eine zweite Methode gegeben.

Steuerung der visibibility mit z-index

nach oben

Man hätte auch den z-Index, der angibt, wie die Schichten übereinandergelegt sind, manipulieren können. Das sähe dann so oder ähnlich aus.

<html><head><title>test</title>
<script language=javaScript>
prolog=new Array();
prolog=document.getElementsByName("karotte");

var e=0;
function zeigen()
{

for(e=0;e<=prolog.length-1;e++)
{
if(prolog[e].style.zIndex !=2)
{prolog[e].style.zIndex=prolog[e].style.zIndex+1;}
else
{prolog[e].style.zIndex=0;}
}
}
</script>
<style type=text/css>
#karotte
{
position:absolute;
top:50;
left:10;
width=250;
background-color:yellow
}
</style>
</head>
<body>
Wer den Prolog im Himmel lesen will (Goethes Faust) der muss unten clicken.<br><br>
<div name="karotte" id="karotte" style="z-index:2";>
Die Sonne tönt<br>
in alter Weise<br>
in Brudersphären Wettgesang<br>
</div>
<div name="karotte" id="karotte" style="z-index:1";>
und ihre vorgeschriebene Reise<br>
vollendet sie mit Donnergang<br>
ihr Anblick gibt den Engeln Stärke<br>
</div>
<div name="karotte" id="karotte" style="z-index:0";>
Wenn keiner sie ergründen mag<br>
Herr die unendlich hohen Werke<br>
sind herrlich wie am ersten Tag<br>
</div>
<div style="position:absolute;top:120;left:10">
<A href="javascript:void(0)"; onClick=zeigen();>test. Get this emotion !!!! For free !!!</a>
<div id="position"></div>
</body></html>

Wer will, kann es sich anschauen, indem er hier clickt. Allerdings macht es genau das gleiche, wie das vorhergehende Programm, wenn es auch technisch anders umgesetzt wurde. Das Programm selbst ist dann leicht zu verstehen. Die Funktion zeigen() erhöht bei jedem Aufruf den z-index, allerdings tut sie das nicht, wenn dieser 2 ist, dann setzt sie ihn auf 0. Dies wiederum bewirkt, dass bei jedem Aufruf das jeweils nächste div aufgeblendet wird.

div bewegen

nach oben

Eine der auffälligsten Neuerungen von DHTML war es, dass es so auf einmal möglich war, bestimmte Bereiche einer HTML Seite zu bewegen. Auf einmal waren Effekte wie dieser möglich. Der Skript, der das produziert, sieht so aus.

<html><head><title>test</title>
<style type="text/css">
#karotte{background:url(meer.jpg) no-repeat;position:absolute; top:10;left:10;width:400;height:400;}
#ruebe{position:absolute;top:310;left:15;z-index:1;font-family:arial;color:red;font-
size:20px;width:400;height:400;}
#gurke{position:absolute;top:309;left:15;z-index:3;background-color:white;font-family:arial;color=blue;font-
size:25px;text-align:right;width:400;height:400;}
</style>
<script language=javascript>
var text="Was reif in diesen Zeilen steht <br>"+
"was lächeln sinnt und sinnend fleht <br>"+
"das soll kein Kind betören<br>"+
"die Schwermut hat es ausgesät<br>"+
"die Wehmut hat hindurchgeweht<br>"+
"die Sehnsucht hats getrieben<br>"+
"und ist das Feld eins abgemäht<br>"+
"die Sehnsucht durch die Stoppeln geht<br>"+
"sucht Ähren die geblieben<br>"+
"sucht Lieb die für sie aufersteht<br> "+
"sucht Lieb die für untergeht<br>"+
"sucht Lieb die sie kann lieben";
function rin()
{
document.getElementById('ruebe').innerHTML=text;
scrolli();
}

var i=310;
function scrolli()
{
i=i-1;
document.getElementById('ruebe').style.top=i;
ende=setTimeout("scrolli()",40);
if (i ==12)
{
clearTimeout(ende);
document.getElementById('gurke').innerHTML="Clemens Brentano";
}
}
</script>
</head><body onload=rin();>
<div id="karotte"></div>
<div id="ruebe"></div>
<div id="gurke"></div>
</body>
</html>

Die Art, wie es programmiert ist, ist nicht besonders günstig, genügt aber, um die Zusammenhänge zu verdeutlichen. In diesem Skript wurden drei div Bereiche definiert. Der div karotte hat das eigentliche Bild, jenes berühmte von Caspar David Friedrich, Der Mönch und das Meer. In den div ruebe wird das das Gedicht von Clemens Brentano geschossen. Der div ruebe befindet sich zu Beginn unterhalb des divs ruebe und wird von dem div gurke verdeckt. Nachdem die Seite geladen wurde, wird die Funktion rin() aufgerufen, die das Gedicht in den div ruebe schiesst. Die Funktion rin() ruft dann die Funktion scrolli() auf. Die Funktion scrolli wiederum zieht den div ruebe nach oben. Sie tut dies, indem sie mit

document.getElementById('ruebe').style.top=i;

bei jedem Durchlauf den div ruebe vertikal neu positionniert und sich dann mit

ende=setTimeout("scrolli()",40);

nach 40 Millisekunden neu aufruft. Wenn i den Wert 12 angenommen hat, ist der div ruebe, der das Gedicht hält, in der Endposition. Die Funktion scrolli wird dann mit

clearTimeout(ende);

gestoppt. Ähnliche Effekte kann man mit der Funktion clip() produzieren, zum Beispiel so was. Der Skript, der uns das auf den Schirm setzt sieht so aus.

<html><head><title>test</title>
<style type="text/css">
#karotte{background:url(meer.jpg) no-repeat;position:absolute; top:10;left:10;width:400;height:400;}
#ruebe{position:absolute;top:10;left:10;z-index:1;font-family:arial;color:red;font-size:20px;}
</style>
<script language=javascript>
var text="Wir sind nur Mund <br>"+
"wer singt das stille Herz <br>"+
"das heil in allen Dingen weilt<br>"+
"sein grosser Schlag ist in uns eingeteilt<br>"+
" in lauter kleine Schläge<br>"+
"sein grosser Schmerz ist, <br>"+
"wie seine grosse Freude,uns zu gross<br>"+
"drum reissen wir uns immer wieder los<br>"+
"und sind nur Mund<br>"+
"doch plötzlich bricht der grosse Herzschlag<br>"+
" in uns ein, so dass wir schreien<br>"+
"und sind dann plötzlich<br> "+
"Wesen, Wandlung und Gestalt<br><br>"+
"Rainer Maria Rilke";
a=25;
function rin()
{
document.getElementById('ruebe').innerHTML=text;
scrolli(a);
}
function scrolli(a)
{
document.getElementById("ruebe").style.clip="rect(0 400"+" "+a+" "+"0)";
a=a+23;
ende=setTimeout("scrolli("+a+")",1000);

if(a>350)
{
clearTimeout(ende);
}

}
</script>
</head><body onload=rin();>
<div id="karotte"></div>
<div id="ruebe" style="clip:rect(0 400 25 0)"></div>
</body>

Auch hier schiesst die Funktion rin() das Gedicht von Rilke in den div ruebe. Anschliessend ruft die Funktion rin() die Funktion scrolli() auf. Entscheidend ist nun die Zeile

document.getElementById("ruebe").style.clip="rect(0 400"+" "+a+" "+"0)";

clip definiert den Bereich einen divs, der sichtbar ist und zwar als Rechteck. Die Art und Weise allerdings, wie sie das tut, ist ziemlich ungewöhnlich. Die Paramter haben folgende Bedeutung. Die ersten zwei Paramter definieren nicht die linke obere Ecke sondern die rechte obere Ecke. Die nächsten zwei Parameter definieren nicht die rechte untere Ecke sondern die linke untere Ecke. Es ist also genau umgekehrt wie sonst üblich. Die Funktion scrolli() wird über setTimeout rekursiv augerufen und bei jedem Aufruf wird a, das heisst der Abstand der linken unteren Ecke zum Anfang des divs um 23 Punkte, das heisst um eine Zeile, erhöht. Wenn a einen Wert von größer 350 hat wird das Spiel beendet. Nach einem ähnlichen Schema läßt sich auch dieser, im Netz häufig zu beobachtende Effekt erzielen. Alles klar ? Der thumbnail der Websites ist zuerst blass und wird dann farbiger. In dem Moment in dem er farbig ist, ist er auch clickable. Allerdings muss man bei dieer Variante auf Zack sein, da man die Website ja nur anclicken kann, wenn die Farben kräftig sind. Wir werden das unten verbessern. Der Skript, der uns dieses Kunstwerk auf den Schirm setzt sieht so aus.

<html><head><title>test</title>
<style type="text/css">
#karotte{position:absolute; top:10;left:10;width:400;height:400}
#ruebe{position:absolute; top:10;left:10;width:400;height:400}
</style>
<script language=javascript>
function scrolli(a,b)
{
document.getElementById("ruebe").style.clip="rect(0"+" "+ a+" "+" 72"+" "+ b+")";
a=a+125;
b=b+125;

if(a>=875)
{
a=125;
b=0;
}
ende=setTimeout("scrolli("+a+","+b+")",1000);

}
</script>
</head>
<body onload=scrolli(125,0)>
<div id="karotte"><img src=film2a.jpg></div>
<div id="ruebe"><img src=film1a.jpg usemap="#bild" border=0></div>
<MAP NAME="bild">
<AREA SHAPE=RECT COORDS="0,0,125,72" HREF="http://www.bodyline-pur.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="125,0,255,72" HREF="http://www.dbo-boettcher.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="250,0,375,72" HREF="http://www.kraftquelle-lebensenergie.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="375,0,500,72" HREF="http://www.hotel-falkensee.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="500,0,625,72" HREF="http://www.hofladen-falkensee.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="625,0,750,72" HREF="http://www.bodytune-falkensee.de" TARGET="_blanc">
</MAP>
</body>
</html>

Das Verfahren ist auch hier relativ simpel. Wir legen zwei Bilder übereinander, das blasse und farblich kräftigere. Die beiden Bilder sehen so aus.

Die Variante kräftig

Die Variante blass

Die Variante kräftig wird zu einem clickable image umfunktionniert. Zu Beginn verdeckt die Variante blass vollkommen die Variante kräftig, so dass keine der Website über einen Hyperlink aufgerufen werden kann. Nachdem die Seite aufgerufen wurde, wird mit onload die Funktion scrolli() aufgerufen und das erste Bild der Variante kräftig mit clip sichtbar gemacht. Die Funktion scrolli() erhöht dann den Wert für a und b und ruft sich nach einer Sekunde erneut auf, mit der Wirkung, dass die zweite Website aufgeblendet wird. Nach diesem Schema werden alle Website durchlaufen. Am Ende angekommen, wird der Wert für a und b auf den Startwert zurückgesetzt und das Spiel beginnt von vorne. Nach dem gleichen Schema hätte man auch so einen Effekt realisieren können. Die Unterschiede zum vorherigen Beispiel sind minimal.

if(a>=750)
{
a=125;
b=0;
}
ende=setTimeout("scrolli("+a+","+b+")",10);

}
</script>
</head>
<body onload=scrolli(125,0)>
<div id="karotte"><img src=film2a.jpg></div>
<div id="ruebe"><img src=film1a.jpg usemap="#bild" border=0></div>
<MAP NAME="bild">
<AREA SHAPE=RECT COORDS="0,0,125,72" HREF="http://www.bodyline-pur.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="125,0,255,72" HREF="http://www.dbo-boettcher.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="250,0,375,72" HREF="http://www.kraftquelle-lebensenergie.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="375,0,500,72" HREF="http://www.hotel-falkensee.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="500,0,625,72" HREF="http://www.hofladen-falkensee.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="625,0,750,72" HREF="http://www.bodytune-falkensee.de" TARGET="_blanc">
</MAP>
</body>
</html>

Wie deutlich zu erkennen, wurde lediglich die Art und Weise wie hochgezält wird und die Zeitdauer, die verstreicht, bis sich die Funktion scrolli() wieder selbst aufruft modifiziert. Schicker wäre es, wenn man mit der Maus zu der Website fahren könnte, die man aufblenden will. Gemeint ist ein Effekt dieser Art. Alles klar ? Das ist so was Ähnliches wie drag and drop. Wenn wir auf dem Bilderstreifen sind, drücken wir die Maustaste, die darunter liegende Website wird farbig, bewegen wir nun mit gedrückter Maustaste die Maus auf dem Bilderstreifen, wird eine Website nach der anderen farbig. Wenn wir einen Doppelclick machen, werden wir weitergeleitet zu dieser Website. Das funktionniert nur mit dem Explorer, wir werden es nachher nochmal für Netscape 6+ programmieren und zu guter letzt noch eine Browser compatible Variante zeigen. Das Browser Chaos erstrahlt hier im übrigen in vollendeter Pracht und Anmut. Der Skript für den Explorer sieht so aus

<html><head><title>test</title>
<style type="text/css">
#karotte{position:absolute; top:10;left:10;width:400;height:400;}
#ruebe{position:absolute; top:10;left:10;width:400;height:400;z-Index=1;}
</style>
<script language=javascript>
document.onmousedown=packmich;

function packmich()
{
start=event.clientX;
objekt = event.srcElement;
document.onmousemove = bewegen;
document.onmouseup = beenden;
a=start;
b=start-125;
document.getElementById("ruebe").style.clip="rect(0"+" "+a+" "+"72"+" "+b+")";
}

function bewegen()
{

if(objekt)
{
schauen=event.clientX;
a=start+schauen-start;
b=a-125;
document.getElementById("ruebe").style.clip="rect(0"+" "+a+" "+"72"+" "+b+")";
}
return false;
}

function beenden()
{
objekt=false;

}
</script>
</head>
<body>
<div id="ruebe" style="clip:rect(0 125 72 0)";><img src=film1a.jpg usemap="#bild" border=0></div>
<div id="karotte"><img src=film2a.jpg></div>
<MAP NAME="bild">
<AREA SHAPE=RECT COORDS="0,0,125,72" HREF="http://www.bodyline-pur.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="125,0,255,72" HREF="http://www.dbo-boettcher.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="250,0,375,72" HREF="http://www.kraftquelle-lebensenergie.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="375,0,500,72" HREF="http://www.hotel-falkensee.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="500,0,625,72" HREF="http://www.hofladen-falkensee.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="625,0,750,72" HREF="http://www.bodytune-falkensee.de" TARGET="_blanc">
</MAP>
</body>

Die Grundidee ist erstmal dieselbe wie in den vorangegangenen Beispielen. Die zwei Bilderstreifen liegen übereinander. Bei dem der oben liegt sorgt clip dafür, dann nur ein Teil sichtbar ist, was dann die Konsequenz hat, dass der untere durchschimmert. Wir sprechen jetzt den Skript durch. Wie gesagt, ist das Verfahren bei Netscape vollkommen anders, darauf kommen wir gleich zurück. Der Skript beginnt schon seltsam, nämlich mit dieser Zeile.

document.onmousedown=packmich;

Das heisst, egal wo die Maus auf der Seite steht, wenn der Mauszeiger gedrückt wird, wird die Funktion packmich() aufgerufen. Erstaunlich ist, dass die Funktion packmich() ohne die runden Klammern aufgerufen wird, was dann die Konsequenz hat, dass auch keine Parameter übergeben werden können. Dass der event handler onmousedown jetzt nicht als Attribut eines HTML Elementes aufgerufen wird, ist erstmal schlecht, denn so ist unklar, welches Element ihn überhaupt aufgerufen hat. Wenn es also keine Vorteile bringt, stellt sich die Frage, warum man den event handler nicht wie üblich als Attribut eines Elementes deklariert. Also etwas in der Art macht.

function packmich()
{
start=event.clientX;
objekt = event.srcElement;
document.onmousemove=bewegen;
a=start;
b=start-125;
document.getElementById("ruebe").style.clip="rect(0"+" "+a+" "+"72"+" "+b+")";
}

function bewegen()
{

if(objekt)
{
schauen=event.clientX;
a=start+schauen-start;
b=a-125;
document.getElementById("ruebe").style.clip="rect(0"+" "+a+" "+"72"+" "+b+")";
}
return false;
}

function beenden()
{
objekt=false;
}
</script>
</head>
<body>
<div id="ruebe" style="clip:rect(0 125 72 0)"; onmousedown=packmich(); onmouseup=beenden();><img src=film1a.jpg usemap="#bild" border=0></div>
<div id="karotte" onmousedown=packmich(); onmouseup=beenden();><img src=film2a.jpg></div>
<MAP NAME="bild">
<AREA SHAPE=RECT COORDS="0,0,125,72" HREF="http://www.bodyline-pur.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="125,0,255,72" HREF="http://www.dbo-boettcher.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="250,0,375,72" HREF="http://www.kraftquelle-lebensenergie.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="375,0,500,72" HREF="http://www.hotel-falkensee.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="500,0,625,72" HREF="http://www.hofladen-falkensee.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="625,0,750,72" HREF="http://www.bodytune-falkensee.de" TARGET="_blanc">
</MAP>
</body>
</html>

Löst man diesen Skript aus, passiert genau das gleiche, wie man sieht, wenn man hier clickt. Wie also deutlich zu erkennen, lassen sich die event handler onmousedown, die die Funktion packmich() aufruft und onmouseup, die das ganze stoppt, auch als Attribut des HTML Elementes deklarieren, allerdings müssen diese beiden Elemente in beide Bereiche integriert werden, da die Maus ja sowohl auf den unteren wie auf den darüber liegenden div gesetzt werden kann. Anders verhält es sich mit onmousemouve, der die Funktion bewegen aufruft, womit dann bewiesen wäre, dass der Aufruf eines event handlers als Objekt von document unter Umständen Sinn macht. Die Funktion bewegen() kann nur richtig arbeiten, wenn das Objekt, das sie bewegen soll, vorher initialisiert wurde. Man muss also eine Möglichkeit haben, dafür zu sorgen, dass sie nur aufgerufen wird, wenn das Objekt bereits initialisiert wurde. Würde man die Funktion bewegen() via onmousemove als Attribut des HTML Elementes deklarieren, dann würde sie aufgerufen, sobald der User die Maus über den Bildstreifen bewegt, also bevor das Objekt überhaupt initialisiert wurde. Man würde einen Fehler erhalten. So wie der Skript geschrieben ist, ruft der event handler onmousedown erstmal die Funktion packmich() auf, diese initialisiert das Objekt objekt in der Zeile

objekt = event.srcElement;

Leider ist diese Zeile auch schon wieder erklärungsbedürftig. Ab dem Internet Explorer 4+ wird beim Aufruf eines event handlers ein Objekt generiert, das folgende Eigenschaften hat.

event.srcElement

das Objekt, dass den event handler aufgerufen hat. Das ist hier erklärungsbedürftig, da zumindest im vorletzten Skript kein HTML Element den event handler als Attribut hatte, man sich folglich fragen kann, woher ein Wert kommen soll. Das Verfahren ist nun so, dass der Explorer bei jedem event (click, mousedown, mousemove etc.) prüft, ob entweder für das Element selbst oder für ein übergeordnetes Element für dieses event eine Funktion deklariert wurde. Der Explorer wandert also solange nach oben, bis er entweder was findet oder eben nicht. Das Element aber, von dem aus mit der Suche gestartet wurde, wird aber weitergereicht und kann mit event.srcElement abgefangen werden

event.clientX
event.clientY

Ermittelt den x bzw. den y Wert des Mauszeigers zum Zeitpunkt des Auftretens des events.

Wie bereits gesagt, interessieren wir uns in diesem Beispiel weniger für ein konkretes Objekt, den wir steuern unser div mit getElementById an, als für die Tatsache, dass ein solches überhaupt existiert. Es existiert, nachdem mit onmousedown die Funktion packmich aufgerufen wurde, die ein Objekt generiert. Dieses Objekt existiert bis mit onmouseup die Funktion beenden() aufgerufen wurde, die mit

objekt=false; das Objekt löscht. objekt ist in unserem Beispiel lediglich ein flag, eine Variable, die zur Programmsteuerung dient. Wir werden weiter unten das Durchreichen von HTML Elementen nochmal diskutieren. Wie bereits erwähnt, ist unter Netscape das Verfahren ein anderes. Wir diskutieren nur den Ansatz von Netscape 6+, in der Hoffnung, dass sich Netscape 4.XX mit seinem veralteten Modell, welches auch Netscape 6+ nicht mehr unterstützt, allmählich vom Markt verabschiedet. Der Skript unten, setzt das auf den Schirm, also genau das gleiche, was auch die Programme vorher gemacht haben, allerdings jetzt für und nur Netscape 6+. Das gleiche Programm für Netscape sieht dann so aus.

document.onmousedown=packmich;

function packmich(e)
{
start=e.pageX;
objekt =true;
document.onmousemove = bewegen;
document.onmouseup = beenden;
a=start;
b=start-125;
document.getElementById("ruebe").style.clip="rect(0"+" "+a+" "+"72"+" "+b+")";
return false;
}

function bewegen(e)
{
if(objekt)
{
schauen=e.pageX;
a=start+schauen-start;
b=a-125;
document.getElementById("ruebe").style.clip="rect(0"+" "+a+" "+"72"+" "+b+")";
}
return false;
}

function beenden()
{
objekt=false;
}
</script>
</head>
<body>
<div id="ruebe" style="clip:rect(0 125 72 0);z-Index:1"><img src=film1a.jpg usemap="#bild" border=0></div>
<div id="karotte"><img src=film2a.jpg></div>
<MAP NAME="bild">
<AREA SHAPE=RECT COORDS="0,0,125,72" HREF="http://www.bodyline-pur.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="125,0,255,72" HREF="http://www.dbo-boettcher.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="250,0,375,72" HREF="http://www.kraftquelle-lebensenergie.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="375,0,500,72" HREF="http://www.hotel-falkensee.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="500,0,625,72" HREF="http://www.hofladen-falkensee.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="625,0,750,72" HREF="http://www.bodytune-falkensee.de" TARGET="_blanc">
</MAP>
</body>
</html>

In beiden Varianten wird also mit Hilfe von

document.onmousedown=packmich;

die Funktion packmich() aufgerufen. Allerdings ergibt sich jetzt ein Unterschied. Bei Netscape wird bei einem Aufruf einer Funktion Eigenschaft von Dokument (siehe oben) ein Objekt mitgeliefert, das einige Informationen enthält, über die Art, wie dieses event aufgerufen wurde und auch, was es überhaupt für ein event ist. Wir brauchen für unser Beispiel nur e.pageX, also den horizontalen Abstand zur linken Begrenzung des Dokumentes. Der Rest des Skriptes ist unverändert, bis auf die Tatsache, dass wir der Variablen Objekt kein Objekt zuweisen sondern nur den Wert true, den wir unten wieder auf false stellen. Wie bereits erwähnt, handelt es sich bei dieser Variablen (in diesem Beispiel) lediglich um einen flag. Um diesen Skript cross Browser kompatibel zu machen, muss man also lediglich dafür sorgen, dass für Netscape mit dieser

start=event.clientX;

Zeile gearbeitet wird und für Netscape 6+ mit dieser

start=e.pageX;

Wenn wir den Netscape 4.XX nicht berücksichtigen, was wir ja tatsächlich nicht tun werden, ist die Lösung einfach und sieht so aus.

document.onmousedown=packmich;

Auch das funktionniert, und zwar mit beiden Browsern, dem Explorer 4+ und Netscape 6+, wovon wir uns überzeugen können, wenn wir hier clicken. Die Vorgehensweise ist simpel. document.all, was ja wie bekannt durch document.getElementById ersetzt werden kann, kennt nur der Explorer. Wenn wir also etwas in der Art schreiben

if(document.all)
{
start=event.clientX;
}
else
{
start=e.pageX;
}

heisst das, dass sich der Explorer die Position des Mauszeigers (respektive den horizontalen Abstand zum linken Rand des Dokumentes) in der Eigenschaft clientX des event Objektes merkt, Netscape hingegen in der Eigenschaft pageX des e Objektes, wobei e auch umbenannt werden kann. Zwischen event und e gibt es allerdings einen Unterschied. Während der Explorer das Objekt event immer produziert, unabhängig davon, ob das event als als Attribut eines HTML Elementes ausgelöst wurde oder nicht, ist e nur vorhanden, wenn das event als Methode von document ausgelöst wurde. In diesem Fall kann man den Skript auch mit diesem Ansatz cross browser kompatibel machen.

document.onmousedown=packmich;

function packmich(e)
{
event=e;
start=event.clientX;
objekt =true;
document.onmousemove = bewegen;
document.onmouseup = beenden;
a=start;
b=start-125;
document.getElementById("ruebe").style.clip="rect(0"+" "+a+" "+"72"+" "+b+")";
return false;
}

Wenn man sich den unten stehenden Schnipsel ansieht, wird deutlich, was gemacht wurde.

document.onmousedown=packmich;

e (Netscape) und event (explorer) meinen dasselbe Objekt, ein Objekt nämlich, dass die Eigenschaften des events hält. Besonders pfiffig ist nun, dass Netscape nicht nur e.pageX versteht sondern auch event.clientX versteht. Da e und event das gleiche ist, können wir der Varianbe e das event Objekt zuweisen.

Das Event an ein HTML Element binden

nach oben

Unsere Programme hatten bis jetzt einen kleinen Schönheitsfehler. Es war egal, wo das event mousedown durchgeführt wurde, es funktionnierte immer. Das kann man wollen, z.B. bei dem berühmten Beispiel, wo zwei Augen den Mauszeiger verfolgen. Man kann das aber auch nicht wollen. Man kann wollen, das ein Aktion nur ausgeführt wird, wenn der Mauszeiger über einem bestimmten Element sitzt. Netscape hat für die Lösung dieses Problems eine neue Funktion, nämlich addEventListener, die allerdings der Explorer nicht unterstützt. Ob der Explorer sie irgendwann auch unterstützten wird, oder ob sie wieder verschwindet, wissen wir nicht. Auf jeden Fall können wir mit dieser Funktion dafür sorgen, dass das Ereignis nur ausgeführt wird, das das Ereignis nur ausgeführt wird, wenn der Mauszeiger über dem Bildstreifen steht. Wir werden nachher noch eine Lösung vorstellen, die ohne diese Funktion auskommt.

document.onmousedown=clear;

function initio()
{
document.getElementsByTagName("img")[1].addEventListener("mousedown",packmich,true);
document.getElementsByTagName("div")[0].firstChild.addEventListener("mousedown",packmich,false);
return false;
}

function clear()
{
return false;
}

Man kann sich davon überzeugen, dass das funktionniert, indem man hier clickt. Allerdings funktionniert es, wie bereits erwähnt, nur mit Netscape 6+, so dass wir nur wenig Freude an dieser Erkenntnis haben. Auf jeden Fall sind die entscheidenden Zeilen diese hier.

document.onmousedown=clear;

function clear()
{
return false;
}

Die Funktion initio() wird über onload aufgerufen. Ein explizites Aufrufen der Funktion addEventListener ist nötig, da sonst die divs, auf die diese Funktion zielt, zu dem Zeitpunkt, als sie initialisiert wird, nicht vorhanden sind. Auch diese Funktion liefert ein Objekt, dass bestimmte Eigenschaften zum aufgetretenen Event speichert. Mit

document.getElementsByTagName("img")[1]

teilen wir mit, an welches Element wir den event listener binden wollen. In diesem Falle also an das zweite Bild. Wir haben jetzt ein kleines Problem, das darin besteht, dass wir nur auf nicht abgedeckten Bereichen eine Mausaktion ausführen können. Ein Teil unseres Filmstreifens ist aber vom darüberliegenden abgedeckt, so dass wir die Aktion nicht mehr ausführen können, wenn der Teilbereich das darüberliegenden Bildes den unteren Bereich bedeckt. Folglich muss auch für das darüberliegende Bild ein addeventlistener definiert werden, was wir mit

document.getElementsByTagName("div")[0].firstChild

dann auch tun. Wir haben das aus didaktischen Gründen etwas komplizierter gemacht, als nötig wäre. Wir können nicht mit dem div arbeiten, da dieser ja eine Höhe von 400 Pixel und eine Breite von ebenfalls 400 Pixel hat, was die Konsequenz hätte, dass über der ganzen zu grossen Fläche die Aktion mousedown wirksam wäre. Wir wollen also auch hier das Bild haben und das Bild ist das erste Kind unseres div. Die Funktion clear brauchen wir, um zu verhindern, dass das Bild bei drücken der Maustaste und ziehen der Maus markiert wird, was ja das normale Verhalten von Netscape ist. Bei dem Bild wiederum gibt es das Problem nicht, dieses ist halt so gross, wie es ist. Der Rest ist dann wie in den Beispielen vorher. Für den Explorer isoliert wäre es auch nicht besonders schwierig, das Beispiel so umzugestalten, dass ein Verschieben der Website nur möglich ist, wenn direkt auf die Bilderleiste geklickt wird. Das sähe dann so aus. (Nochmal zur Wiederholung: Bei Netscape funktionniert das nicht, weil Netscape uns nicht die Eigenschaften des events liefert, wenn es als Attribut eines HTML Elementes aufgerufen wird, wir können also nicht feststellen, wo der Mauszeiger war, als die Maustaste gedrückt wurde). Für den Explorer lässt sich das so lösen.

<html><head><title>test</title>
<style type="text/css">
#karotte{position:absolute; top:10;left:10;width:400;height:74;}
#ruebe{position:absolute; top:10;left:10;width:400;height:74;z-Index=1;}
</style>
<script language=javascript>
function packmich()
{
start=event.clientX;
objekt = event.srcElement;
document.onmousemove=bewegen;
a=start;
b=start-125;
document.getElementById("ruebe").style.clip="rect(0"+" "+a+" "+"72"+" "+b+")";
}

function bewegen()
{

if(objekt)
{
schauen=event.clientX;
a=start+schauen-start;
b=a-125;
document.getElementById("ruebe").style.clip="rect(0"+" "+a+" "+"72"+" "+b+")";
}
return false;
}

function beenden()
{
objekt=false;
}

</script>
</head>
<body>
<div id="ruebe" style="clip:rect(0 125 72 0)"; ><img src=film1a.jpg usemap="#bild" border=0 onmousedown=packmich(); onmouseup=beenden();></div>
<div id="karotte"><img src=film2a.jpg onmousedown=packmich(); onmouseup=beenden();></div>
<MAP NAME="bild">
<AREA SHAPE=RECT COORDS="0,0,125,72" HREF="http://www.bodyline-pur.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="125,0,255,72" HREF="http://www.dbo-boettcher.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="250,0,375,72" HREF="http://www.kraftquelle-lebensenergie.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="375,0,500,72" HREF="http://www.hotel-falkensee.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="500,0,625,72" HREF="http://www.hofladen-falkensee.de" TARGET="_blanc">
<AREA SHAPE=RECT COORDS="625,0,750,72" HREF="http://www.bodytune-falkensee.de" TARGET="_blanc">
</MAP>
</body>
</html>

Wer dem Frieden nicht traut, kann hier clicken. Wir rufen also als Attribut der Bilder die Funktion packmich() auf und da das Objekt, dass die Daten zu dem Event hält ja beim Explorer immer vorhanden ist, haben wir auch Werte für a und b. Da hier das Event an die Bilder gebunden ist, tritt es auch nur im Zusammenhang mit diesen auf. Nun haben wir das Problem für jeden einzelnen Browser gelöst, stellt sich nur noch die Frage, wie löst man es für beide zusammen. Ein Skript, der tatsächlich den Effekt nur produziert, wenn sich die Maus über der Bildleiste befindet und für beide Browser funktionniert sieht so aus.

function packmich()
{
if(!document.all)
{
document.getElementsByTagName("img")[1].addEventListener("mousedown",packmich2,true);
document.getElementsByTagName("div")[0].firstChild.addEventListener("mousedown",packmich2,true);
}
else
{

document.onmousedown=packmich2;
}
}

function clear()
{
return false;
}

function packmich2(e)
{
if (!document.all){event=e;}
start=event.clientX;

objekt =true;
document.onmousemove=bewegen;
a=start;
b=start-125;
document.getElementById("ruebe").style.clip="rect(0"+" "+a+" "+"72"+" "+b+")";

}

function bewegen(e)
{
if (!document.all){event=e;}

if(objekt)
{
schauen=event.clientX;
a=start+schauen-start;
b=a-125;
document.getElementById("ruebe").style.clip="rect(0"+" "+a+" "+"72"+" "+b+")";
}
return false;
}

function beenden()
{
objekt=false;
document.onmousedown=clear;
}
</script>
</head>
<body>
<div id="karotte"><img src=film2a.jpg onmousedown=packmich(); onmouseup=beenden();></div>
<div id="ruebe" style="clip:rect(0 125 72 0)" ><img src=film1a.jpg border=0 onmousedown=packmich(); onmouseup=beenden();></div>
</body>
</html>

Dass das funktionniert kann man überprüfen, indem man hier clickt.

event handler auf das gesamte Dokument auf ein Objekt begrenzen

nach oben

Bis jetzt wurden alle Skripte so geschrieben, dass der event handler an ein bestimmtes, in diesem Falle ein den img tag, HTML Element gebunden waren. Damit war dann sicher gestellt, dass die Aktion nur ausgeführt wurde, wenn der Mauszeiger über diesem Element stand. Man könnte auch anders vorgehen. Man könnte das event an das gesamte Dokument binden, aber es nachträglich auf ein HTML Element beschränken. Das geht relativ einfach mit dem Internet Exploder und sieht so aus.

function packmich()
{
objekt=event.srcElement.id;
if(objekt =="himbeere")
{
document.onmousemove=bewegen;
start=event.clientX;
a=start;
b=start-125;
document.getElementById("ruebe").style.clip="rect(0"+" "+a+" "+"72"+" "+b+")";
}
return false;
}

function bewegen()
{
if(objekt)
{
schauen=event.clientX;
a=start+schauen-start;
b=a-125;
document.getElementById("ruebe").style.clip="rect(0"+" "+a+" "+"72"+" "+b+")";
}
return false;
}

function beenden()
{
objekt=false;
}
</script>
</head>
<body>
<div id="karotte"><img src=film2a.jpg id="himbeere"></div>
<div id="ruebe" style="clip:rect(0 125 72 0)" ><img src=film1a.jpg border=0 id="himbeere"></div>
</body>
</html>

Wie üblich, kann man nachprüfen, ob das funktionniert, indem man hier clickt. Das Beispiel funktionniert nur mit dem Internet Explorer. Wie deutlich zu erkennen, werden die Funktionen nicht über die HTML Elemente angesteuert. Sie werden gestartet, von even handlern, die für das gesamte Dokument gültig sind.

document.onmousedown=packmich;
document.onmouseup=beenden;

Enstscheidend ist nun diese Zeile

objekt=event.srcElement.id;

Hier wird abgefangen, als Eigenschaft des event Objektes, welches alle möglichen Eigenschaften über das event speichert, wo es aufgetreten ist. In diesem Fall fangen wir die id ab, die in unserem Falle himbeere heisst. Damit ist die Sache relativ einfach. Wenn die id Himbeere ist, heisst das, dass sich die Maus über den Bildstreifen befand. Ist dies der Fall, lösen wir, schieben wir die Funktion bewegen an.

objekt=event.srcElement.id;
if(objekt =="himbeere")
{
document.onmousemove=bewegen;
start=event.clientX;
a=start;
b=start-125;
document.getElementById("ruebe").style.clip="rect(0"+" "+a+" "+"72"+" "+b+")";
}

die Funktion bewegen() ist also solange aktiv, wie das objekt Himbeere ist. Lässt der User irgendwo auf der Seite die Maustaste los, stellen wir objekt auf false, wass dann bewirkt, dass die Funktion bewegen() nichts mehr tut. Soweit zum Internet Explorer. Wie geht das mit Netscape ? Wohl wissend, dass das keiner glaubt, sind die Konzepte hier bei Netscape 6+ und Explorer 6+ ähnlich. Mit einer nur minimalen Änderung, kann man den Skript in beiden Browsern zum Laufen bringen.

function bewegen(e)
{

if(objekt)
{
if(!document.all){event=e;}
schauen=event.clientX;
a=start+schauen-start;
b=a-125;
document.getElementById("ruebe").style.clip="rect(0"+" "+a+" "+"72"+" "+b+")";
}
return false;
}

Dass auch das funktionniert, kann man überprüfen, indem man hier clickt. Verändert haben wir lediglich diesen Teil.

if(!document.all)
{
event=e;
objekt=e.target.id;
}
else
{
objekt=event.srcElement.id;
}

Im Gegensatz zum Explorer, der das Objekt unter dem event mit event.scrElement.id abgreift, macht Netscape das mit e.target.id. Das ist also das einzige, was wir verändern müssen.

vorhergehendes Kapitel	nach oben	nächstes Kapitel