| (© copyright) Letzte Änderungen: |
Modul 11: Anlage 6: Grundlagen und Schwierigkeiten von dhtml
In Modul 6.2 haben wir uns recht ausführlich mit dhtml beschäftigt, in Modul 8 sind wir nochmals kurz darauf zurückgekommen. Dhtml, also dynamic html ist eine tolle Sache, um mit verschiedenen Ebenen zu arbeiten, Bilder und Text, der sich in Containerboxen (Floating Boxes, Rahmen) befindet, übereinanderzuschieben, solche Containerboxen via CSS zu formatieren und mit JavaScript (Modul 7) zu animieren. Wir haben etliche Beispiele behandelt. (Sie sollten vor dem Weiterlesen Modul 6.2.1.3 und 6.2.2 durcharbeiten, falls Sie dies nicht bereits getan haben, außerdem sollten Sie fundierte Kenntnisse in JavaScript, s. Modul 7 haben).
Sowohl bei der Erstellung als auch bei der Animierung solcher Floating Boxes haben wir uns die Arbeit elegant von GoLive (Modul 6.2) abnehmen lassen. Das ist auch gut so, denn für die unterschiedlichen Browser müssen unterschiedliche Skripte sowie die zugehörigen Browserweichen generiert werden, eine gewaltige Arbeit, wenn Sie dies von Hand bewerkstelligen.
GoLive leistet gute Arbeit: die Animationsskripte laufen problemlos ab Version 4.5 unter Netscape und ab Version 5 unter IE sowohl für den Mac als auch für den PC (IE 6 konnte ich noch nicht ausprobieren). Unter NN 6 laufen sie jedoch nur, wenn für GoLive 5 das entsprechende NN6-Update installiert wurde.
Hinweis: unter allen Browsern laufen sie jedoch dennoch nicht: Opera 5 für den Mac zeigt die Animation nicht an, wenn sich Opera unter der Standardvoreinstellung Typ Internet Explorer 5 verkauft. Stellt man in Opera den Typ Mozilla ein, gibt es beim Seitenaufruf eine JavaScript-Fehlermeldung.
Um die Probleme zu verstehen, muss man wissen, dass dhtml weder zum html-Standard noch zum CSS-Standard gehört. Dhtml ist auch keine eigenständige Sprache, sondern verwendet bestimmte html-Tags, um diese via Cascading Style Sheets (CSS) in spezieller Weise zu formatieren und mit Hilfe von JavaScript zu animieren.
Das Ganze begann wohl mit der Erfindung des eigentlich nirgendwo angewandten <overlay>-Tags in html 3(?), der dazu dienen sollte verschiedene Bilder überlappen zu können.
Netscape führte dann in NC 4 den Tag <layer> ein, der sich aber nicht durchsetzte und dann rasch (d.h. noch innerhalb der NC 4-Versionen) von der Definition von Layern via <span> bzw. <div>-Tags abgelöst wurde und so auch von IE übernommen wurde. Diese Tags umspannen einen html-code-Bereich, der dann via CSS formatiert werden kann sowie als Container frei positioniert werden kann und dabei andere html-Bereiche überdecken kann. Bis heute werden Layers in dieser Weise definiert. Allerdings ist bereits die Steuerung dieser Layer für IE und Nescape seit deren Einführung (seit den 4er-Versionen) unterschiedlich. Daraufhin schaltete sich das W3-Konsortium ein und trieb die Entwicklung eines Document Object Models (DOM) voran. Es gibt eine sog. DOM-Spezifikation, die regelt, wie eine Programmiersprache (sei es JavaScript oder auch andere) auf die entsprechenden Dokumenten-Objekte (d.h. die entsprechenden html-Tags) zugreifen muss. DOM wurde also quasi der Standard. JavaScript-Code für dhtml des Netscape Communicator 4.x funktioniert im NN6 nicht mehr. Steuerung nach DOM funktioniert weder im NC 4 noch im IE 4, allerdings ab IE 5.
Hinweis: Die DOM-Spezifikation ist zu erreichen unter: http://www.w3.org/DOM/
Dies bedeutet, dass man nun wenigstens drei Versionen für dhtml programmieren muss, eine für NC 4.x, eine für IE >=4x , sowie eine für NN6 (ggf. auch noch die <layer>-Version für NC 4.0, sowie Anpassungen für Opera) Die NN6-Programmierung, die auf DOM basiert, wird interessanterweise auch von IE 5, jedoch nicht von IE 4 oder NC 4.x verstanden. Meist wird der Code für alle Browserversionen auf eine Seite gepackt und die entsprechenden Script-Teile mit browserauslesenden if-Abragen differenziert, man kann aber auch verschiedene Seitenversionen via Browserweichen auseinanderdividieren.
Ich werde nun nicht auf die Details der Programmierung für die verschiedenen Versionen eingehen, mir ist es wichtig, dass Sie wissen, dass dhtml-Verwendung ggf. fehleranfällig ist, da sie nach wie vor nicht richtig standardisiert ist und mit jeder neuen Browserversion Überraschungen auftreten können. Besonders wichtig ist umfassender Test Ihrer Seiten mit dhtml-Animationen unter verschiedenen Browsern, da sie vielleicht auf Ihrem Browser sehr schön ablaufen, auf anderen Browsern aber vielleicht nur Fehlermeldungen produzieren.
Tipp: Wenn Sie genaueres zur JavaScript-Programmierung der verschiedenen dhtmo-Versionen wissen wollen, empfehle ich Ihnen das bereits mehrfach erwähnte Buch von Seeboerger-Weichselbaum, M. (2001, 3.Aufl.): JavaScript.- bhv-verlag, aus dem ich mein dhtml-Wissen auch überwiegend beziehe.
Ein paar wenige grundsätzliche Unterschiede möche ich aber dennoch zur Erläuterung nachfolgend herausstellen:
Proprietäre Layerdefinition in Netscape Composer 4.x:
<layer> Inhalt </layer>, mit verschiedensten Attributen. Wird hier nicht mehr weiter berücksichtigt, da inkompatibel nur zu NC4.x, selbst NN6 stellt sie nicht mehr dar.
Verschiedenste Attribute möglich, z.B.
<layer bgcolor="ff0000" z-index="0" height="300" width="300" pagex=30 pagey=20>dies ist der Layer.</layer>
(für weitere Attribute siehe html-Referenz). Die Verwendung wird nicht empfohlen.
Kompatible Layerdefinition für Netscape Composer ab 4.x und InternetExplorer ab 4.x (sowie weitere, wie z.B. Opera)
<div ID="box1" style="position:absolute">
<img src="bild1.jpg">
</div>
oder auch
<span ID="box1" style="position:absolute">
<img src="bild1.jpg">
</span>
Als Beispiel wurde ein Bild als Layerinhalt definiert.
Die Formatierung der für Layers (Container) verwendeten div bzw. span-Tag-Inhalte sollte über CSS durchgeführt werden.
Animation von Layers, die mit dem div- oder span-Tag definiert werden.
Für Netscape Composer 4.x
Via JavaScript (vgl. Modul 7): kann nun z.B. ein div oder span-Layer bewegt werden. Ich verzichte auf den kompletten Skriptcode, aber Sie könnten per onclick bzw. onload-Eventhandler (letztere ggf. mit einer setTimeout();-Anweisung verbunden) das entsprechende Skript benutzerdefiniert bzw. beim Laden der Seite auslösen.
Soll sich der Layer (= der Container, = die Floating Box = der Schwebrahmen) nun z.b. über die Seite bewegen, wäre dabei ein möglicher Bewegungsschritt z.B.
window.document.box1.left=50;
window.document.box1.top=100;
Das Ganze könnte via einer Schleife mehrfach ablaufen und so kontinuierlich bewegt werden. Näheres vgl. Modul 7. Box1 ist automatisch ein Unterobjekt des window.document-Objekts. Es wird als solches angesprochen und die Eigenschaften left und top geändert.
Layeranimation für IE 4/5:
Die Definition eines Layer erfolgt genauso wie oben. Die Steuerung ist allerdings unterschiedlich.
Der entsprechende Scriptbefehl für einen Bewegungsschritt wie oben wäre:
box1.style.left=50:
box1.style.top=100;
Style ist hier ein Objekt (als Unterobjekt des Objekts box1) und bezieht sich auf das Attribut bei der DIV-Einrichtung. Als solches können wiederum die Eigenschaften left und top geändert werden.
Layeranimation für NN6 (läuft auch unter IE 5):
Die Lösung ist fast identisch wie die o.a. Lösung für IE 4/5, also dieselbe Definition für den Layer und dasselbe Bewegungsscript.
Einziger, aber wesentlicher Unterschied: NN6 kann das Element box1 nicht automatisch als Objekt ansprechen. Um dies zu tun, muss es zuvor im Skript als Variable definiert werden und via der im div-Tag angegebenen ID zugeordnet werden: also vor der Bewegnungsmethode muss kommen:
var box1=document.getElementById("box1)";
getElementById(); ist eine Methode des document-Objekts, welche erst mit JavaScript 1.5 eingeführt wurde. Die Variable box1 wurde so als Objekt definiert, welches durch JavaScript nun wie oben via Unterobjekt Style angesprochen werden kann, also z.B. wieder mit:
box1.style.left=50:
box1.style.top=100;
Hinweis: Die vorhergehenden Beispiele sind gleichzeitig Beispiele zur Steuerung von Cascading Style Sheets mit Hilfe von JavaScript. Sehen Sie hierzu auch in unsere Anlage 5: weitere Hinweise zu CSS.
Dies soll zur Veranschaulichung genügen, ich hoffe, dass Sie damit die entsprechenden von GoLive oder Dreamweaver generierten dhtml-Skripte besser beurteilen können. Ansonsten können Sie sich unter Verwendung vieler if-Abfragen nun an die von-Hand-Programmierung von dhtml wagen, am besten unter der gekonnten Anleitung aus dem oben erwähnten JavaScript-Buch von M. Seeboerger-Weichselbaum.
