Kapitel 18 DHTML III: Netscape 6

Überhaupt hat der Fortschritt das an sich,
dass er viel größer ausschaut, als er ist.
– Johann Nepomuk Nestroy

Spätsommer 2000. Nach langem Hickhack veröffentlicht Netscape ziemlich überraschend Version 6 seines Browsers. Zunächst erschien eine Preview Release 1, dann eine Preview Release 2, und schließlich Version 6.0. Die Fachwelt war erstaunt, schließlich ließ das unter www.mozilla.org zur Verfügung stehende Open-Source-Pendant in Sachen Stabilität und Zuverlässigkeit nur Übles vermuten. Die Veröffentlichung wurde von einem großen Medien-Hype begleitet, denn der Internet Explorer hatte den Netscape Navigator in Sachen Verbreitung mittlerweile deutlich überholt, und viele Beobachter sahen in der Veröffentlichung des Netscape 6 eine Möglichkeit, die Microsoft-Bastion zu erstürmen (genauer gesagt handelt es sich um eine Netscape-Bastion, die mittlerweile von Microsoft gestürmt worden war). Und der Netscape 6 wäre dazu wohl auch in der Lage – wäre er stabil, doch das ist momentan leider noch nicht der Fall. In Zukunft wird sich da noch viel tun, so viel ist gewiss.

Das Problem liegt an einer anderen Stelle. Aufgrund des erwähnten Hype wurde der neue Netscape von vielen Benutzern installiert. DHTML-Seiten, die sich mittlerweile ja großer Beliebtheit erfreuen, sind jedoch auf Internet Explorer ab Version 4 sowie auf Netscape Navigator 4 ausgerichtet, der Netscape 6 bleibt hier außen vor. Aus mangelndem Wissen und/oder fehlender Literatur haben bis dato auch nur sehr wenige Websitebetreiber ihre Seiten umgestellt, sodass sie auch mit dem Netscape 6 funktionieren. Zumindest der Punkt fehlender Literatur sollte mit diesem Buch behoben sein. Es ist ja gar nicht einmal viel, was verändert werden muss, und Sie finden die notwendigen Informationen in diesem und im nächsten Kapitel.

Vom Kapitelaufbau orientieren wir uns an den beiden vorhergehenden Kapiteln. Zunächst legen wir die Grundlagen für den Zugriff dar, und dann exerzieren wir die bestehenden Beispiele noch einmal durch – diesmal aber für Netscape 6. Aus diesem Grund sind die Beschreibungen bei den Beispielen selbst eher kurz gefasst, denn Sie wissen ja bereits, wie der Hase prinzipiell läuft. Auf die Anpassung für Netscape 6 kommt es an, und hierauf wird jeweils explizit eingegangen.

Eines der Beispiele, das Drag&Drop-Beispiel, funktioniert unter dem Netscape 6 noch nicht so wie vorgesehen. Ein Bug würde eine komplett andere Implementierung erfordern, weshalb wir das Beispiel weglassen.

18.1 Grundlagen 

Das DOM des Netscape 6 ähnelt dem des Internet Explorer 5.x sehr stark, was auch kein Wunder ist – orientieren sich beide Modelle ja mehr oder weniger stark an der W3C-Empfehlung. Demnach kann auf alles, was zwischen Tags eingeschlossen ist, per JavaScript zugegriffen werden, beispielsweise auf die Schriftfarbe eines Absatzes.

18.1.1 HTML-Tags 

Auch beim Netscape 6 ist der ID-Parameter wichtig, um bequem auf einzelne Elemente zugreifen zu können:

<P ID="Galileo">Galileo Press</P>

Dieser Absatz ist jetzt mit der ID Galileo assoziiert und Sie können mit JavaScript darauf zugreifen. Wie das geht, erfahren Sie in Kürze.

So etwas wie Layer gibt es beim Netscape 6 auch. Sie verwenden den altbekannten Tag <DIV>. Der <LAYER>-Tag wird von Netscape 6 nicht mehr unterstützt. Er wird in der Praxis ignoriert, d. h., das alles, was innerhalb dieses Tags steht, zwar angezeigt wird, aber Sie können über die ID des Layers nicht auf dessen Inhalt zugreifen.

<DIV ID="DIV1">
<!-- HTML-Kommandos etc. -->
</DIV>

Dem <DIV>-Tag gibt man oft einen STYLE-Parameter mit, um beispielsweise dessen Inhalt unsichtbar zu machen.

18.1.2 Objektzugriff 

Das document-Objekt hat unter Netscape 6 die praktische Methode getElementById(). Dieser wird als Parameter der Wert des ID-Attributs des entsprechenden Tags übergeben, und sie liefert dafür das entsprechende Element zurück. Über die style-Eigenschaft des Elements können Sie dann das Aussehen des Elements beeinflussen.

Mit dem folgenden Code macht man beispielsweise den Layer "DIV1" aus dem obigen Beispiel unsichtbar:

document.getElementById("DIV1").style.visibility = "hidden"

Diese Syntax ist natürlich insofern verlockend, als dass Sie als Wert für den ID-Parameter auch Leer- und Sonderzeichen verwenden können. Im Sinne der Kompatibilität zu den anderen Browsern sollten Sie dies aber tunlichst vermeiden!

Um festzustellen, ob ein bestimmter Browser die Methode getElementById überhaupt unterstützt, können Sie wie gehabt eine if-Abfrage verwenden:

if (document.getElementById){
   //Code für Netscape 6
}

Auch der Internet Explorer ab Version 5 kennt document.getElementById. Wie Sie einen Netscape 6 von einem IE 5.x unterscheiden, erfahren Sie im nächsten Kapitel!

18.2 Beispiele 

Im Folgenden finden Sie fast alle der bekannten Beispiele aus den beiden vorhergehenden Kapitel, diesmal für den Netscape 6 ausgerichtet. Hier noch einmal das Versprechen: Im nächsten Kapitel werden wir tatsächlich browserübergreifend.

18.2.1 Animiertes Logo 

Das animierte Logo ist das erste Beispiel, das wir auf den neuesten Netscape-Browser portieren möchten. Hier zunächst der HTML-Code, natürlich mit einem <DIV>-Element:

<HTML>
<HEAD>
<TITLE>Animiertes Logo</TITLE>
</HEAD>
<BODY onLoad="init()">
<H3>Animiertes Logo</H3>
<DIV ID="logo" STYLE="position:relative"><IMG SRC="logo.gif"></DIV>
</BODY>
</HTML>

Obwohl dies das erste Beispiel ist, gibt es hier schon ein wenig babylonische Verwirrung. Der Zugriff auf die Objekteigenschaften geschieht wie beim Internet Explorer: style.eigenschaft. Der große Pferdefuß: Erhält man die Koordinaten der linken oberen Ecke des <DIV>-Elements mit posLeft und posTop, so verwendet Netscape 6 hier die Eigenschaftennamen, die Sie schon aus Kapitel 16 kennen: left und top. Damit geht der Netscape 6 übrigens mit der W3C-Empfehlung konform, der Internet Explorer kocht hier ein eigenes Süppchen.

Es sind also die folgenden Schritte zu tun:

Wenn Sie diese Änderungen nun vornehmen, werden Sie feststellen, dass das Skript nicht wie gewünscht läuft. Der Grund: Die Eigenschaften top und left sind keine nummerischen Werte, sondern Strings. Sie enthalten Werte wie beispielsweise "200px" für 200 Pixel. Es macht dem JavaScript-Interpreter nichts aus, wenn Sie nummerische Werte zuweisen – die Umwandlung geschieht automatisch –, aber wenn Sie wie im Beispiel mit den Werten rechnen möchten, müssen Sie sie zunächst in Integer-Werte umwandeln. Dies geht mit der Funktion parseInt.

Das Skript sieht dann folgendermaßen aus:

<HTML>
<HEAD>
<TITLE>Animiertes Logo</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function init(){
   if (document.getElementById)
      document.getElementById("logo").style.left = "-200px"
   //Animation starten
   animate()
}
function animate(){
   if (parseInt(document.getElementById("logo").style.left)>0)
      document.getElementById("logo").style.left = 0
   if (parseInt(document.getElementById("logo").style.left)<0){
      document.getElementById("logo").style.left = 
         parseInt(document.getElementById("logo").style.left) + 3
      setTimeout("animate()", 50)
   }
}
//--></SCRIPT>
</HEAD>
<BODY onLoad="init()">
<H3>Animiertes Logo</H3>
<DIV ID="logo" STYLE="position:relative"><IMG SRC="logo.gif"></DIV>
</BODY>
</HTML>

Abbildung 18.1  Das Logo im Anflug von links

18.2.2 Sichtbar und unsichtbar 

Als nächstes wird das Beispiel mit den Registern angepasst. Im Vergleich zur Lösung für den Internet Explorer ändert sich kaum etwas. Wieder wird getElementById eingesetzt, der Rest bleibt im Prinzip gleich:

<HTML>
<HEAD>
<TITLE>Register</TITLE>
<STYLE TEXT="text/css"><!--
A {color:black; text-decoration:none}
--></STYLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function init(){
   var layer_x = document.getElementById("register1").style.left
   var layer_y = document.getElementById("register1").style.top
   document.getElementById("register2").style.left = layer_x
   document.getElementById("register2").style.top = layer_y
   document.getElementById("register2").style.visibility = "hidden"
   document.getElementById("register3").style.left = layer_x
   document.getElementById("register3").style.top = layer_y
   document.getElementById("register3").style.visibility = "hidden"
}
function register(n){
   for (var i=1; i<=3; i++){
      var visi = (i==n) ? "visible" : "hidden"
      document.getElementById("register"+i).style.visibility = visi
   }
}
//--></SCRIPT>
</HEAD>
<BODY onLoad="init()">
<TABLE><TR>
<TD BGCOLOR="red">
   <A HREF="javascript:register(1)">Register 1</A>
</TD>
<TD BGCOLOR="green">
   <A HREF="javascript:register(2)">Register 2</A>
</TD>
<TD BGCOLOR="blue">
   <A HREF="javascript:register(3)">Register 3</A>
</TD>
</TR></TABLE>
<DIV ID="register1" STYLE="position:absolute">
   <H3>Register 1</H3>
</DIV>
<DIV ID="register2" STYLE="position:absolute">
   <H3>Register 2</H3>
</DIV>
<DIV ID="register3" STYLE="position:absolute">
   <H3>Register 3</H3>
</DIV>
</BODY>
</HTML>

Abbildung 18.2  Registerreiter mit DHTML

Beachten Sie, dass die Positionierung der Layer absolut sein sollte, damit die einzelnen Register auch direkt unterhalb der drei Links angezeigt werden!

18.2.3 Neuer Mauszeiger 

Das Beispiel wird ebenso schnell umgesetzt wie die beiden vorherigen DHTML-Effekte. Die Ereignisbehandlung lehnt sich an der des Netscape Navigator an (Parameter e für Ereignisbehandlungsmethoden), der prinzipielle Elementzugriff am Internet Explorer (über ID-Attribut, nur eben unter Verwendung von getElementById), und der Namen der einzelnen Koordinaten wiederum am Netscape Navigator (left/top). Das wirkt zwar zunächst ein wenig verwirrend, aber nach ein paar Beispielen kennt man die Unterschiede im Schlaf.

<HTML>
<HEAD>
<TITLE>Mauszeiger</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function init(){
   document.onmousemove=anim
}
function anim(e){
   document.getElementById("mauszeiger").style.left = e.pageX
   document.getElementById("mauszeiger").style.top = e.pageY
}
//--></SCRIPT>
</HEAD>
<BODY BGCOLOR="white" onLoad="init()">
<H1>Mauszeiger</H1>
<DIV ID="mauszeiger" STYLE="position:absolute"><IMG SRC="logo.gif"></DIV>
</BODY>
</HTML>

Abbildung 18.3  Das Galileo-Logo als Mauszeiger

18.2.4 Permanentes Werbebanner 

Zum letzten Beispiel: auch hier gibt es prinzipiell nicht viel Neues. Da das Listing aber ein wenig länger ist, wollen wir hier – ähnlich wie im vorhergehenden Kapitel – schrittweise vorgehen. Zunächst muss in der Funktion init()der Layer sichtbar gemacht und anim() aufgerufen werden:

function init(){
   document.all.logo.style.visibility="visible"
   anim()
}

In der Funktion anim() wird wie zuvor die neue Position des Werbebanners berechnet, das Banner dorthin verschoben, und dann die Funktion via Timeout nach einer halben Sekunde erneut aufgerufen. Jedoch heißen die Eigenschaften, die beispielsweise die aktuelle Scrollposition des Browserfensters enthalten, beim Internet Explorer (und wohl auch beim Netscape 6) komplett anders als beim Netscape Navigator 4. Aus window.innerWidth (Breite des Browserfensters) wird document.body.clientWidth, und window.pageXOffset und window.pageYOffset finden in document.body. scrollLeft und document.body.scrollTop ihre Entsprechung. Der Rest bleibt beinahe gleich. Kleiner Unterschied am Rande: document.body. clientWidth arbeitet viel exakter als das Netscape-Pendant, man muss von diesem Wert also in der Tat nur die Breite der Grafik abziehen, und nicht etwas mehr, wie das noch beim Netscape Navigator 4 der Fall war.

function anim(){
   document.all.logo.style.posLeft = document.body.clientWidth +
     document.body.scrollLeft – 89
   document.all.logo.style.posTop = document.body.scrollTop}
   setTimeout("anim()", 500)
}

Abbildung 18.4  Das Galileo-Logo als immer sichtbares Werbebanner

Zum Abschluss dieses Beispiels (und dieses Kapitels) noch einmal das komplette Listing wie Sie es auf der Buch-CD finden.

<HTML>
<HEAD>
<TITLE>Werbebanner</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function init(){
   document.getElementById("logo").style.visibility="visible"
   anim()
}
function anim(){
   document.getElementById("logo").style.left = 
      window.innerWidth + window.pageXOffset – 100
   document.getElementById("logo").style.top = window.pageYOffset
   setTimeout("anim()", 500)
}
//--></SCRIPT>
</HEAD>
<BODY BGCOLOR="white" onLoad="init()">
<H1>Werbebanner</H1>
<DIV ID="logo" STYLE="visibility:hide;position:absolute">
<A HREF="http://www.galileo-press.de"><IMG SRC="logo.gif" BORDER="0"></A>
</DIV>
<SCRIPT LANGUAGE="JavaScript"><!--
for (var i=0; i<30; i++)
   document.write("F&uuml;lltext")
for (i=0; i<3; i++){
   for (var j=0; j<10; j++)
      document.write("<"+"BR"+">")
   document.write("F&uuml;lltext")
}
//--></SCRIPT>
</BODY>
</HTML>

18.3 Fragen & Aufgaben