| | |
 |
Wir beginnen mit dem HTML-Code. Beachten Sie, dass dort noch nicht alle Register an dieselbe Stelle gesetzt werden (das wäre mit demstyle-Attribut kein Problem); stattdessen wird später mit JavaScript die Position des ersten Registers bestimmt, und die anderen beiden werden dann dorthin bewegt. Bei den drei Reitern ist aber schon die JavaScript-Funktion zum Ein- bzw. Ausblenden der jeweiligen Register vorgesehen. <html><head><title>Register</title><style text="text/css"><!--a {color:black; text-decoration:none}--></style></head><body onload="init();"><table><tr><td bgcolor="red"> <a href="#">Register 1</a></td><td bgcolor="green"> <a href="#">Register 2</a></td><td bgcolor="blue"> <a href="#">Register 3</a></td></tr></table><div> <h3>Register 1</h3></div><div> <h3>Register 2</h3></div><div> <h3>Register 3</h3></div></body></html> Die Implementierung ist klar: Die CSS-Eigenschaftvisibility wird gesetzt, um die einzelnen Register ein- und auszublenden. Zwar könnte man hier mit einer Zeichenkette undeval() arbeiten (wie schon einige Male zuvor in diesem Buch), aber es ist praktischer, in einer Variablen eine Referenz auf das Objekt zu speichern. Man kann dann auf dievisibility-Eigenschaft mittelsObjektreferenz.visibility zugreifen und spart sich alle weiteren Abfragen. Die Variablendefinition sieht wie folgt aus: if (document.getElementById) { var objref1 = document.getElementById("register1").style; var objref2 = document.getElementById("register2").style; var objref3 = document.getElementById("register3").style;} Der nächste Schritt erstellt wieder ein paar Hilfsfunktionen, um die Koordinaten eines Blocks browserunabhängig zu setzen: function lieslinks(n) { eval("var obj = objref" + n); if (document.all) { return obj.posLeft; } else if (document.getElementById) { return parseInt(obj.left); }}function setzelinks(n, wert) { eval("var obj = objref" + n); if (document.all) { obj.posLeft = wert; } else if (document.getElementById) { obj.left = wert + "px"; }}function liesoben(n) { eval("var obj = objref" + n); if (document.all) { return obj.posTop; } else if (document.getElementById) { return obj.top; }}function setzeoben(n, wert){ eval("var obj = objref" + n); if (document.all) { obj.posTop = wert; } else if (document.getElementById) { obj.top = wert + "px"; }} Anstelle voneval() können Sie natürlich auch – etwas eleganter – alle Objektreferenzen in einem Array speichern. Die Funktioninit() wird beim Laden der Seite ausgeführt. Dort werden zunächst das zweite und dritte Register neu positioniert, und zwar an derselben Stelle wie das erste Register. Außerdem müssen die beiden Register unsichtbar gemacht werden, denn anfangs ist das erste Register sichtbar: var layer_x = lieslinks(1);var layer_y = liesoben(1);setzelinks(2, layer_x);setzeoben(2, layer_y);objref2.visibility = "hidden";setzelinks(3, layer_x);setzeoben(3, layer_y);objref3.visibility = "hidden"; Das war es auch fast schon. Das Einzige, was noch fehlt, ist die Funktionregister(), die von den JavaScript-Links aufgerufen wird und das jeweils gewählte Register einblendet und die anderen unsichtbar macht: function register(n) { for (var i=1; i<=3; i++) { var visi = (i==n) ? "visible" : "hidden"; document.layers["register"+i].visibility = visi; }} Hier der komplette, browserunabhängige Code für dieses Beispiel: <html><head><title>Register</title><style type="text/css"><!--a {color:black; text-decoration:none}--></style><script type="text/javascript"><!--var objref1;var objref2;var objref3;function lieslinks(n) { eval("var obj = objref" + n); if (document.all) { return obj.posLeft; } else if (document.getElementById) { return parseInt(obj.left); }}function setzelinks(n, wert) { eval("var obj = objref" + n); if (document.all) { obj.posLeft = wert; } else if (document.getElementById) { obj.left = wert; }}function liesoben(n) { eval("var obj = objref" + n); if (document.all) { return obj.posTop; } else if (document.getElementById) { return obj.top; }}function setzeoben(n, wert){ eval("var obj = objref" + n); if (document.all) { obj.posTop = wert; } else if (document.getElementById) { obj.top = wert; }}function init() { if (document.getElementById) { objref1 = document.getElementById("register1").style; objref2 = document.getElementById("register2").style; objref3 = document.getElementById("register3").style; } var layer_x = lieslinks(1); var layer_y = liesoben(1); setzelinks(2, layer_x); setzeoben(2, layer_y); objref2.visibility = "hidden"; setzelinks(3, layer_x); setzeoben(3, layer_y); objref3.visibility = "hidden";}function register(n) { for (var i=1; i<=3; i++) { var visi = (i==n) ? "visible" : "hidden"; eval("var obj = objref" + i); obj.visibility = visi; }}//--></script></head><body onload="init();"><table><tr><td bgcolor="red"> <a href="#">Register 1</a></td><td bgcolor="green"> <a href="#">Register 2</a></td><td bgcolor="blue"> <a href="#">Register 3</a></td></tr></table><div> <h3>Register 1</h3></div><div> <h3>Register 2</h3></div><div> <h3>Register 3</h3></div></body></html>
Abbildung 17.4 Immer nur ein Register ist sichtbar.  17.4.3 Neuer Mauszeiger | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
 | Das Element mit der Grafik wird im HTML-Code definiert (mitid="mauszeiger"). |
| | Wenn der Benutzer eine Mausbewegung macht (Event-Handleronmousemove), wird das Element an die aktuelle Mausposition bewegt. |
Wie bereits in Kapitel 14 beschrieben wurde, funktioniert das Event-Handling in den »großen« Browsern leicht unterschiedlich. Mit dem folgenden Code, der in der schon standardmäßig verwendeten Funktioninit() landet, fangen Sie Mausbewegungen ab und weisen JavaScript an, bei jeder Bewegung die Funktionanim() aufzurufen:
function init() { if (window.Event) { document.captureEvents(Event.MOUSEMOVE); } document.onmousemove = anim;}
Die Funktionanim() platziert dann den Mauszeiger und verwendet dabei zwei schon bekannte Hilfsfunktionen:
function setzelinks(n) { if (document.all) { document.all.mauszeiger.style.posLeft = n; } else if (document.getElementById) { document.getElementById("mauszeiger").style.left = n + "px"; }}function setzeoben(n) { if (document.all) { document.all.mauszeiger.style.posTop = n; } else if (document.getElementById) { document.getElementById("mauszeiger").style.top = n + "px"; }}Doch nun zur Funktionanim() selbst. Diese ermittelt zunächst die aktuelle Mausposition. In Mozilla-Browsern erhalten Sie diese viae.pageX unde.pageY (e ist der Parameter, der automatisch an die Ereignisbehandlungsfunktion übergeben wird). Im Internet Explorer verwenden Sieevent.clientX undevent.clientY. Dann platzieren Sie – mitsetzelinks() undsetzeoben() – die Maus an der angegebenen Position:
function anim(e) { var x = (window.Event) ? e.pageX : event.clientX; var y = (window.Event) ? e.pageY : event.clientY; setzelinks(x); setzeoben(y);}
Hier noch einmal der komplette Code im Überblick:
<html><head><title>Mauszeiger</title><script type="text/javascript"><!--function init() { if (window.Event) { document.captureEvents(Event.MOUSEMOVE); } document.onmousemove = anim;}function setzelinks(n) { if (document.all) { document.all.mauszeiger.style.posLeft = n; } else if (document.getElementById) { document.getElementById("mauszeiger").style.left = n + "px"; }}function setzeoben(n) { if (document.all) { document.all.mauszeiger.style.posTop = n; } else if (document.getElementById) { document.getElementById("mauszeiger").style.top = n + "px"; }}function anim(e) { var x = (window.Event) ? e.pageX : event.clientX; var y = (window.Event) ? e.pageY : event.clientY; setzelinks(x); setzeoben(y);}//--></script></head><body bgcolor="white" onload="init();"><h1>Mauszeiger</h1><div> <img src="logo.gif" /></div></body></html>
Hier klicken, um das Bild zu Vergrößern
Abbildung 17.5 Ein neuer (und ziemlich großer) Mauszeiger
Gratis-Hoster, also Firmen, die kostenlosen Webspace anbieten, lassen sich ja einiges einfallen, um effektiv Werbung auf den Webseiten unterzubringen. Ein besonders aufdringlicher Gag ist ein Werbebanner, das so konzipiert ist, dass es immer sichtbar ist (beispielsweise, indem es sich immer in der rechten oberen Ecke des Browserfensters befindet). Eine weitere Anwendungsmöglichkeit hierfür ist eine Navigation oder Sitemap, die ebenfalls immer sichtbar ist. Auch hier gilt: Setzen Sie den Effekt recht sparsam ein, oder bieten Sie zumindest die Möglichkeit an, das Banner (oder die Sitemap) ausblenden zu können, um die dahinter liegenden Bereiche auf der Website überhaupt ansehen zu können.
Die Vorgehensweise bei diesem Beispiel ist folgende:
| | Im HTML-Code wird ein Element definiert, der das Banner enthält (mitid="logo", wir verwenden auch in diesem Beispiel wieder das Galileo-Logo, das hier die Funktion eines Werbelinks auf die Verlags-Homepage hat). |
| | Per Timeouts wird das Element alle halbe Sekunde in die rechte obere Ecke des Browserfensters verschoben. |
Auch hier beginnen wir mit einer Funktioninit(). Da wir mit Timeouts arbeiten, müssen wir an dieser Stelle nicht mühsam Ereignisse abfangen und umleiten, sondern lediglich das Werbebanner sichtbar machen. (Es wäre nicht hübsch, wenn das Banner schon beim Laden der Seite sichtbar wäre, denn zu diesem Zeitpunkt ist es noch recht schwierig, die richtige Position zu bestimmen.) Dann rufen wir die Funktion auf, die das Logo in die rechte Ecke schiebt (anim()):
function init() { if (document.getElementById) { document.getElementById("logo").style.visibility = "visible"; } anim();}
Auch die Funktionanim() ist relativ kurz, der Aufwand besteht – wie so oft bei DHTML – eher in der Recherche (und in der Fehlersuche) als inder Programmierung per se. Beginnen wir mit Mozilla-Browsern: Inwindow.pageXOffsetundwindow.pageYOffset steht, an welche Position die aktuelle Seite im Browserfenster gescrollt worden ist. Die Y-Koordinate der linken oberen Ecke des Banners muss also aufwindow.pageYOffset gesetzt werden, das Banner soll ja oben andocken. Bei der X-Koordinate ist das nicht ganz so trivial, aber nicht unmöglich. Also: Inwindow.innerWidthsteht, wie breit das Browserfenster abzüglich Scrollbalken, Leisten etc. ist. In der Praxis ist dieser Wert nicht immer exakt ganz zutreffend, aber man erhält immerhin eine ganz gute Schätzung. Von diesem Wert muss man die Breite der Grafik abziehen (oder am besten noch ein bisschen mehr, eben wegen der Ungenauigkeiten mancher Browser), und dann hat man die Position der Grafik – beinahe. Schließlich ist es auch möglich, auf Webseiten horizontal zu scrollen, also muss zu diesem Wert nochwindow.pageXOffset addiert werden.
Jedoch heißen die Eigenschaften, die beispielsweise die aktuelle Scrollposition des Browserfensters enthalten, beim Internet Explorer komplett anders als bei Mozilla. Auswindow.innerWidth (Breite des Browserfensters) wirddocument.body.clientWidth, undwindow.pageXOffset undwindow.pageYOffset finden indocument.body.scrollLeft unddocument.body.scrollTop ihre Entsprechung. Der Rest bleibt beinahe identisch. Ein kleiner Unterschied am Rande:document.body.clientWidth arbeitet viel exakter als das Mozilla-Pendant. Man muss von diesem Wert also in der Tat nur die Breite der Grafik abziehen und nicht etwas mehr, wie das zuvor noch der Fall war.
Somit sind die Koordinaten ermittelt worden, und Sie müssen nur noch dafür sorgen, dass sichanim() via Timeout wieder selbst aufruft – oder Sie verwenden gleichsetInterval() anstelle vonsetTimeout().
function anim() { if (document.all) { var x = document.body.clientWidth + document.body.scrollLeft – 181; var y = document.body.scrollTop; } else if (document.getElementById) { var x = window.innerWidth + window.pageXOffset - 192; var y = window.pageYOffset; } setzelinks(x); setzeoben(y); setTimeout("anim()", 500);}
Die Funktionensetzelinks() undsetzeoben() kennen Sie bereits von den vorherigen Beispielen zur Genüge, weswegen Sie im Folgenden ohne weitere Vorrede den kompletten Code finden:
<html><head><title>Werbebanner</title><script type="text/javascript"><!--function init() { if (document.getElementById) { document.getElementById("logo").style.visibility = "visible"; } anim();}function setzelinks(n) { if (document.all) { document.all.logo.style.posLeft = n; } else if (document.getElementById) { document.getElementById("logo").style.left = n + "px"; }}function setzeoben(n) { if (document.all) { document.all.logo.style.posTop = n; } else if (document.getElementById) { document.getElementById("logo").style.top = n + "px"; }}function anim() { if (document.all) { var x = document.body.clientWidth + document.body.scrollLeft – 181; var y = document.body.scrollTop; } else if (document.getElementById) { var x = window.innerWidth + window.pageXOffset - 192; var y = window.pageYOffset; } setzelinks(x); setzeoben(y); setTimeout("anim()", 500);}//--></script></head><body bgcolor="white" onload="init();"><h1>Werbebanner</h1><divstyle="visibility:hide;position:absolute"><a href="https://www.rheinwerk-verlag.de/?GPP=openbook"><img src="logo.gif" border="0" /></a></div><script type="text/javascript"><!--for (var i=0; i<30; i++) { document.write("Fülltext");}for (i=0; i<3; i++) { for (var j=0; j<10; j++) { document.write("<" + "br" + " />"); } document.write("Fülltext");}//--></script></body></html>
Zum Ende dieses Kapitels noch ein kurzer Ausblick: Die Möglichkeiten von DHTML sind fast unendlich. An dieser Stelle kann leider kein ausführlicher Einstieg in die Materie gegeben werden, da dies den Umfang dieses Buches sprengen würde und ja auch nicht unser eigentliches Thema ist. Aus demselben Grund können hier auch nicht alle Inkompatibilitäten der verschiedenen Browser aufgelistet werden. Das Ziel dieses Kapitels war es, Ihnen einen browserunabhängigen Überblick über alle relevanten Aspekte der Materie zu geben. Mit den vorgestellten Techniken, der Referenz und ein wenig Fantasie und Freude am Ausprobieren können Sie beeindruckende Ergebnisse erzielen. Mehr brauchen Sie in der Regel sowieso nicht.
Hier klicken, um das Bild zu Vergrößern
Abbildung 17.6 Das Werbebanner ist immer rechts oben auf der Seite.
1 In manchen Quellen werden sie auch als »kaskadierende Stilvorlagen« o. Ä. bezeichnet, aber in diesem Fall sollte man nichts gegen den Anglizismus haben.
| << zurück |
| ||||||||||
 | ||||||||||
| ||||||||||
| ||||||||||
| ||||||||||
| ||||||||||
| ||||||||||
Copyright © Rheinwerk Verlag GmbH 2007
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
