DynFX Workshop: Animation mit dynamic HTML

Auf der einen Seite gibt es da diese ganzen statischen Web-Pages, die Information pur anbieten, auf der anderen Seite dann aber auch jene Seiten, die vor animierten Grafiken nur so sprühen. Erstere sind zwar funktionell, wirken aber schnell langweilig, letztere wirken meist überladen, brauchen viel Zeit und fallen schnell auf die Nerven, also welchen Mittelweg soll man gehen? Ganz einfach: Den des dynamischen HTML!

In diesem dritten Teil der Reihe Advanced HTML nehmen wir einmal die neuen Fähigkeiten des Internet Explorer 4.0 unter die Lupe und verbinden die Themen der bisherigen Folgen über JavaScript und Cascading Stylesheets, denn hierauf basiert dynamic HTML.

Einen ersten, sehr einfachen Effekt kennen wir schon von Netscape 3, das Austauschen von Grafiken bei darüberstreifendem Mousezeiger, hierzu wurden die Grafiken im HEAD des Dokuments geladen, dann in JavaScript die entsprechenden Event-Handler geschrieben, und die Ereignisse ONMOUSEOVER und ONMOUSEOUT abgefangen. Mit dHTML wird auch dieser einfache Effekt noch leichter realisiert. Werfen Sie einen Blick auf folgenden Quellcode:

<HTML>

<HEAD>
  <TITLE>Effekt 1</TITLE>
</HEAD>

<BODY>
  <IMG SRC="Pfeil.gif"
ONMOUSEOVER="this.src='PfeilRot.gif';"
ONMOUSEOUT="this.src='Pfeil.gif';">
</BODY>

</HTML>

Mit diesen wenigen Zeilen und den beiden Grafiken Pfeil.gif und PfeilRot.gif erreichen Sie bereits einen unkomplizierten Wechseleffekt. Durchgeführt wird dies, indem der Eigenschaft src (Quelle) ein neuer Wert zugewiesen wird. Als zugehöroges Objekt wird hier einfach this verwendet, was sich immer auf das HTML-Objekt bezieht, in dem es steht.

Nun möchten Sie aber sicher nicht nur Grafiken auswechseln, wenn der Mousezeiger darüberstreift, sondern auch mal die Auszeichnung eines Textes ändern, zum Beispiel wenn es sich um einen Link handelt. Hierzu folgendes Beispiel:

<A HREF="index.htm"
ONMOUSEOVER="this.style.color='#FF0000';"
ONMOUSOUT="this.style.color='#FFCF00';">
Hier gehts irgendwo hin!</A>

Hiermit erstellen Sie einen Link, der im Normalzustand Orange ausgezeichnet ist, und beim darüberfahren plötzlich in Rot erscheint. Gearbeitet wwird wieder mit dem Objektbezeichner this, dessen Formatattribute jedoch nicht direkt angesprochen werden, sondern über ein zwischgeschaltetes style Attribut verwendet werden. Die Schreibweise der Style ist an den Cascading Stylesheets angelehnt, mußte jedoch angepasst werden. So gibt es keine Bezeichner mit Bindestrichen, da diese bereits als Minus verwendet werden:

Cascading Stylesheet	dynamic HTML
font-family	fontFamily
font-size	fontSize
...	...

Ein weiterer Effekt, den wir hier noch gesondert betrachten werden ist das Ein- und Ausblenden von ganzen Schichten, Netscape verwendet hierfür Layers, Microsoft benötigt garkeinen speziellen Befehl, sondern läßt alle Objekte mittels dHTML steuern.

Die Sichtbarkeit eines Objekts wird durch den Stil display gesteuert. Erhält er den Wert none ist das Objekt unsichtbar, wird sein Wert freigelassen erscheint das Objekt wieder. Mit folgendem Ausschnitt lassen Sie eine ganze Zeile verschwinden und wieder erscheinen:

<DIV ID="Zeile">Das ist die Textzeile, die ich
verschwinden und erscheinen
laassen kann!</DIV>
<A HREF="javascript:document.all.Zeile.style.display=
'none';">Ausblenden</A>
<A HREF="javascript:document.all.Zeile.style.display=
'';">Einblenden</A>

Wie sie sehen wurde hier der Textzeile mittels des ID Parameters ein Name verpasst, der dann weiter unten dazu dient, das Objekt direkt ansprechen zu können! Vor den Namen Zeile wurde hier noch document.all gesetzt. Diese Schreibweise ist notwendig, da die neue Version von JScript noch genauer bei der Adressierung von Objekten vorgeht.

Mit diesen Anweisungen sollten Sie nun in der Lage sein, komplette Schichten mit Text erscheinen und verschwinden zu lassen. So könnten Sie ein Menü erstellen, das aufgeklappt wird, sobald die Mouse es berührt.

Eine weitere Neuerung ist das dynamische verändern von Texten. So können Sie einen kompletten Abschnitt mit einem Befehl ändern. Hierzu ein kleines Beispiel:

<DIV ID="Zeile">Hier kommt der Text hin...</DIV>
<A HREF="javascript:document.all.Zeile.innerHTML=
'Das ist der erste Text';">Erster</A>
<A HREF="javascript:document.all.Zeile.innerHTML=
'Das ist der zweite Text';">Zweiter</A>

Hier wird die Eigenschaft innerHTML verwendet. Es gibt jedoch noch weitere Eigenschaften dieser Art, zum Beispiel innerText, outerHTML und outerText.

	Aktuell

	Magazin

	Software

	Praxis

	Kommentar