Inhalt dieses Kapitels:
Erhältlich u.a. bei Amazon.de
6
Zwischen einem HTML-Dokument und den in diesem Dokument enthaltenen Skripten ist eine Schnittstelle erforderlich, um gerade interaktive Möglichkeiten zu nutzen. Mit Hilfe eines Links und javascript: kann eine Funktion aktiviert werden, aber das ist bei weitem nicht ausreichend. Bestimmte Funktionalitäten sind gewünscht, wenn spezielle Ereignisse eintreten. Es soll zum Beispiel ein Bild ausgetauscht werden, wenn der Mauszeiger über einen Link bewegt wird, oder ein Skript muss initialisiert werden, wenn das Dokument geladen ist.
HTML-Element und Event-Handler
Für diese ereignisorientierten Aufgaben gibt es die Event-Handler (Event = Ereignis). Sie werden bei dem gewünschten HTML-Element (zum Beispiel einem Link) hinzugefügt - und zwar immer genau diejenigen, die gerade benötigt werden. Im Prinzip sieht der Aufruf eines Event-Handlers folgendermaßen aus:
<Start-Tag ... onEvent="JavaScript-Quelltext">
Tritt bei dem durch das HTML-Element definierten Objekt das Ereignis auf, wird der zu dem Ereignis definierte JavaScript-Quelltext ausgeführt. Das HTML-Element, das Ereignis und der JavaScript-Quelltext müssen jeweils spezifiziert werden. Die Nutzung des Schlüsselworts this bezieht sich immer auf das zum HTML-Element korrespondierende JavaScript-Objekt. So besteht immer eine Zugriffsmöglichkeit auf dieses Objekt. Im Laufe der JavaScript-Versionen wurden übrigens immer mehr Event-Handler hinzugefügt bzw. waren bei immer mehr HTML-Elementen nutzbar.
Die Skriptsprache bei den Event-Handlern ist nicht notwendigerweise JavaScript, auch andere Skriptsprachen sind verfügbar - allerdings bei weitem nicht so verbreitet. Trotzdem erscheint es sinnvoll, im Header des Dokuments folgende (seit HTML 4 verfügbare) Meta-Angabe aufzunehmen:
<meta http-equiv="content-script-language" content="text/javascript">
Ein besonderes Augenmerk liegt außerdem auf dem verwendeten JavaScript-Quelltext. Da es bei den Event-Handlern keine direkte Unterscheidung der JavaScript-Versionen gibt, wie sie bei dem Start-Tag <script ...> mit dem Attribut language für das HTML-Element script angegeben werden kann, empfiehlt es sich, immer das niedrigste Level zu nutzen. Wer möchte schon gerne bei Browsern mit "nur" JavaScript 1.3 eine Fehlermeldung sehen, weil in dem JavaScript-Quelltext eines Event-Handlers JavaScript 1.5 verwendet wurde?
Sinnvoll sind Funktionsaufrufe, wobei die Funktion versionsabhängig definiert ist:
<html>
<head>
...
<script language="JavaScript">
<!--
function meineFunktion()
{
alert("Sorry, nicht bei dieser JavaScript-Version!")
return false
}
//-->
</script>
<script language="JavaScript1.3">
<!--
function meineFunktion()
{
...
return true
}
//-->
</script>
</head>
<body>
...
<a href="..." onClick="return meineFunktion(this) ">...</a>
...
</body>
</html>
Event-Handler sind reichlich vorhanden. Ein praktischer Fall für den Einsatz:
Sobald ein Dokument geladen wird, soll ein zweites, kleines Fenster mit zusätzlicher Information geöffnet werden. Das Ereignis ist das Laden des Dokuments. So kommt man auf den Event-Handler onLoad, der bei dem Start-Tag <body ...> ergänzt wird. Also sieht der HTML-Start-Tag folgendermaßen aus:
<body
onLoad="window.open('extra.html', 'Extra', 'width=200,height=120')">
Um einen Überblick zu ermöglichen, sind hier erst einmal die wichtigsten Event-Handler zusammen in einer Tabelle aufgeführt. Spezielle Eigenheiten einzelner Event-Handler sind im Anschluss aufgeführt.
Event-Handler
| Event-Handler | Beschreibung |
|---|---|
| onAbort | Führt den JavaScript-Quelltext aus, wenn das Laden eines Bilds abgebrochen wird. |
| onBlur | Führt den JavaScript-Quelltext aus, wenn ein Formularelement oder das Fenster den Eingabefokus verliert. |
| onChange | Führt den JavaScript-Quelltext aus, wenn ein Formularelement (Select, Text, Textarea) verändert wird. |
| onClick | Führt den JavaScript-Quelltext aus, wenn das entsprechende Objekt angeklickt wird. |
| onDblClick | Führt den JavaScript-Quelltext aus, wenn auf das entsprechende Objekt ein Doppelklick ausgeführt wird. |
| onError | Führt den JavaScript-Quelltext aus, wenn beim Laden eines Dokuments oder eines Bilds ein Fehler aufgetreten ist - beispielsweise wenn der URL des Bilds nicht korrekt war, bei dem der Event-Handler aufgeführt ist. |
| onFocus | Führt den JavaScript-Quelltext aus, wenn ein Fenster, Frame, Frameset oder Formularelement den Eingabefokus erhält. |
| onLoad | Führt den JavaScript-Quelltext aus, wenn ein Dokument oder alle Dokumente eines Framesets geladen wurden. |
| onMouseDown | Führt den JavaScript-Quelltext aus, wenn eine Maustaste gedrückt wird. |
| onMouseOut | Führt den JavaScript-Quelltext aus, wenn der Mauszeiger das Objekt verlässt, zu dem der Event-Handler gehört. |
| onMouseOver | Führt den JavaScript-Quelltext aus, wenn der Mauszeiger das Objekt betritt, zu dem der Event-Handler gehört. |
| onMouseUp | Führt den JavaScript-Quelltext aus, wenn eine Maustaste losgelassen wird. |
| onReset | Führt den JavaScript-Quelltext aus, wenn ein Formular zurückgesetzt wird (Reset). |
| onResize | Führt den JavaScript-Quelltext aus, wenn ein Fenster oder Frame in der Größe verändert wird. |
| onSelect | Führt den JavaScript-Quelltext aus, wenn Text in einem Text- oder Textarea-Feld selektiert wird. |
| onSubmit | Führt den JavaScript-Quelltext aus, wenn ein Formular abgeschickt wird. |
| onUnload | Führt den JavaScript-Quelltext aus, wenn ein Dokument verlassen wird. |
Tabelle 6.1: Übersicht über die Event-Handler
Die Übersicht ist nicht vollständig, denn mit neueren Versionen kommen auch weitere Event-Handler hinzu und je nach Browser sind zudem proprietäre Erweiterungen vorhanden. Interessant ist jedoch noch, bei welchen HTML-Elementen die Event-Handler häufig verwendet werden und ab welcher JavaScript-Version sie verfügbar sind.
Event-Handler und typische HTML-Elemente
| Event-Handler | Typische HTML-Elemente | Verfügbar seit JavaScript-Version |
|---|---|---|
| onAbort | img | 1.1 |
| onBlur | input, body | 1.0 1.1 (Button, Checkbox, FileUpload, Frame, Password, Radio, Reset, Submit, window) |
| onChange | input, select | 1.0 1.1 (FileUpload) |
| onClick | a, input type="button", input type="submit" | 1.0 1.1 (return false ist möglich) |
| onDblClick | a | 1.2 |
| onError | img | 1.1 |
| onFocus | input, body | 1.0 1.1 (Button, Checkbox, FileUpload, Frame, Password, Radio, Reset, Submit, window) 1.2 (Layer) |
| onLoad | img, layer, body | 1.0 1.1 (Image) |
| onMouseDown | input type="button", a | 1.2 |
| onMouseOut | layer, a | 1.1 |
| onMouseOver | layer, a | 1.0 1.1 (Area) |
| onMouseUp | input type="button", a | 1.2 |
| onReset | form | 1.1 |
| onResize | body | 1.2 |
| onSelect | input type="text", textarea | 1.0 |
| onSubmit | form | 1.0 |
| onUnload | body | 1.0 |
Tabelle 6.2: Typische HTML-Elemente und JavaScript-Versionen
Auch die Liste der HTML-Elemente ist nicht vollständig. Zudem ist seit HTML 4 bei nahezu jedem HTML-Element eine größere Palette Event-Handler nutzbar. Die Liste beschränkt sich auf diejenigen HTML-Elemente, bei denen die jeweiligen Event-Handler üblicherweise auftreten.
Einige Eigenheiten von speziellen Event-Handlern sollen allerdings noch hervorgehoben werden. Zudem ist der Einsatz diverser Event-Handler im Kapitel "Formulare" beschrieben, weil diese im Zusammenhang mit Formularen relativ häufig eingesetzt werden.
Besonders zu beachten ist, dass der Eingabefokus auch dann verloren geht, wenn ein anderes Fenster als das aktuelle Browserfenster in den Vordergrund gebracht wird. Und das kann ziemlich schnell passieren!
<body bgcolor="#eeeeee"
onBlur="document.bgcolor='#eeeeee'"
onFocus="document.bgcolor='#ffffff'">
<input type="text"
onBlur="letzter_wert=this.value">
Bei diesem Event-Handler ist Rückgabewert möglich. Mit diesem wird gesteuert, ob die begonnene Aktion ausgeführt werden soll oder nicht. Hier ein Beispiel:
Vor dem Wechsel auf eine spezielle Seite soll nachgefragt werden, ob der Wechsel wirklich ausgeführt werden soll. Das Ereignis tritt folglich bei dem Link auf. Da auf einen Klick mit der Maus reagiert werden soll, ist der richtige Event-Handler onClick. Zudem muss ein Rückgabewert berücksichtigt werden, um eventuell den Wechsel auf die andere Seite noch verhindern zu können.
<a href="http://www.rabich.de"
onClick="return confirm('Wirklich?')">Dietmar Rabich's Homepage</a>
Hauptaufgabe ist die Steuerung von Fehlern. Beispielsweise ist es mit diesem Handler möglich, ein Bild, welches nicht geladen werden kann, durch ein anderes zu ersetzen.
<img src="nicht_da.png" onError="alert('Bild fehlt!')">
Wie bei dem Event-Handler onBlur sei hier erwähnt, dass dieses Ereignis auch außerhalb des eigentlichen Dokuments ausgelöst werden kann.
Bei Dokumenten tritt dieses Ereignis auf, wenn das Dokument vollständig geladen ist - bei einigen wenigen Browsern leider ohne Rücksicht auf Bilder etc.! Ist er bei Framesets aufgeführt, erfolgt das Ereignis, wenn alle zum Frameset gehörigen Dokumente geladen sind.
Nutzt man onLoad bei Bildern, so erfolgt der Aufruf bei dem jeweiligen Tag <img ...> des HTML-Elements, wenn das Bild geladen ist.
<body onLoad="initialisierung()">
Ein wichtiges Ereignis, das auftritt, wenn zum Beispiel der Mauszeiger einen Link verlässt. Interessant ist, dass das Pärchen onMouseOut und onMouseOver nicht mit der gleichen JavaScript-Version eingeführt wurde. Auch hier ein Beispiel:
Der URL zu einem Link soll in der Statuszeile nicht angezeigt werden. Stattdessen soll es ein frei wählbarer Text sein. Der richtige Ort für das Ereignis oder die Ereignisse ist der Link. Der URL wird angezeigt, wenn sich der Mauszeiger darüber befindet und sonst nicht. Wenn der Mauszeiger über den Link bewegt wird, zündet der Event-Handler onMouseOver, wird er wieder wegbewegt, ist es onMouseOut.
<a href="http://www.irgendwohin.abc?par=kxyw4711" onMouseOver="window.status='Und weg... '; return true" onMouseOut="window.status=''">Mein Verweis</a>
Das Ereignis tritt zum Beispiel auf, wenn der Mauszeiger einen Link betritt. Siehe dazu auch die Beschreibung des Event-Handlers onMouseOut.
Wird ein Fenster in der Größe verändert, so erfolgt ein Aufruf des Event-Handlers onResize. Neupositionierungen von Layern o.Ä. lassen sich so automatisch veranlassen.
Ein wichtiger Event-Handler im Zusammenhang mit Formularprüfungen, denn er wird vor Versand von Formulardaten aufgerufen. Durch den Rückgabewert, der bei diesem Event-Handler genutzt wird, läßt sich der Versand von Formulardaten im Fehlerfall unterbinden.
Das Gegenstück zum Event-Handler onLoad stellt dieser Handler dar. Er kann zum Beispiel genutzt werden, um eventuell geöffnete zusätzliche Fenster zu schließen.
Was wären Event-Handler, wenn man sie nicht einmal an einem praktischen Beispiel ausprobieren könnte? Der Objekttyp Image erfreut sich großer Beliebtheit, denn es ist der Objekttyp, welcher für die Buttoneffekte genutzt wird. Um einen derartigen Effekt aufzubauen, bedarf es allerdings auch geeigneter Event-Handler. Aber nun zum Objekttyp selbst.
Ein Objekt vom Typ Image wird automatisch mit jedem Bild innerhalb eines Dokuments angelegt. Jedes dieser Objekte kann mit Hilfe des Arrays document.images angesprochen werden. Da sich die Indizierung der Objekte und damit die Verwendung der Nummern mit jeder Änderung der Seite verändern kann, sollte man jedem Bild, welches man ansprechen möchte, mit Hilfe des Attributs name einen Namen geben.
<img ... name="meinBild">
document.images["meinBild"]
Neues Image-Objekt
Zusätzlich ist mit Hilfe des Konstruktors Image eine Anlage eines derartigen Objekts auch in Skripten möglich.
new Image([Breite][, Höhe])
Die Breite und Höhe muss nicht unbedingt mit angegeben werden. In der Regel geschieht dies auch nicht.
Noch erwähnt werden sollte, dass der Objekttyp mit den hier vorgestellten Eigenschaften mit der Version JavaScript 1.1 eingeführt wurde.
Die wesentliche Eigenschaft im Zusammenhang mit vielen Skripten ist src, hier aber trotzdem eine ausführlichere Liste:
Eigenschaften eines Images
| Eigenschaft | Beschreibung |
|---|---|
| border | Breite des Rands; entspricht dem Attribut border des HTML-Elements <img ...> |
| complete | Boole'scher Wert, der aussagt, ob ein Bild vollständig geladen wurde oder nicht. |
| lowsrc | URL des niedrigauflösenden Bilds; entspricht dem Attribut lowsrc des HTML-Elements <img ...> und ist somit nur bei Browsern verfügbar, die auch dieses Attribut kennen |
| name | Name des Bilds; entspricht dem Attribut name des HTML-Elements <img ...> |
| src | URL des Bilds; entspricht dem Attribut src des HTML-Elements <img ...> |
Tabelle 6.3: Eigenschaften des Objekttyps Image
Ein neues Bild in einem Skript wird folglich so geladen:
meinBild = new Image() meinBild.src = "neues_bild.gif"
Eigentlich ist der Begriff "laden" so zu verstehen, dass das Bild in den Cache des Browsers geladen wird.
Ein Bild im Dokument passend zu tauschen geschieht folgendermaßen:
document.images["vorhandenesBild"].src = meinBild.src
Dies setzt voraus, dass das Bild im HTML-Dokument den Namen vorhandenesBild bekam. Lädt man das Bild nicht vorab, so wird durch die dargestellte Zuweisung der Ladevorgang erst initiiert. Man "sieht" also, dass das Bild geladen wird, und eine Verzögerung stellt sich ein.
leicht
Schreiben Sie ein Skript, welches Bilder vorab lädt. (Eine sinnvolle Anwendung wäre damit das Laden von Bildern zum Beispiel für eine Folgeseite. Die Zeit, in der die Seite betrachtet wird, vergeht so nicht ungenutzt.)
leicht
Sie kennen den netten Effekt, dass sich das zu einem Link gehörige Bild ändert, wenn man den Mauszeiger über das Bild bewegt? Schreiben Sie ein solches Skript.
mittel
Ändern Sie den Effekt aus der vorigen Übung so ab, dass ein drittes Bild erscheint, wenn man die Maustaste drückt.
leicht
Schreiben Sie drei Funktionen, die jeweils eine Meldung liefern, wenn ein Bild geladen wurde, der Ladevorgang abgebrochen wurde oder der Ladevorgang fehlerhaft war.
mittel
Schreiben Sie ein Skript, das eine JavaScript-gesteuerte Animation ablaufen lässt.
Wichtig ist, sich erst einmal ein Array (oder andere geeignete Variablen) anzulegen, die die neuen Image-Objekte aufnehmen.
var bilder = new Array()
Die Ladefunktion selbst besteht aus der Neuanlage eines Objekts vom Typ Image und dem Setzen einer passenden Quelle.
function lade(img_name)
{
var anzahl_bilder = bilder.length
bilder[anzahl_bilder] = new Image()
bilder[anzahl_bilder].src = img_name
}
Diese Ladefunktion muss für jedes Bild aufgerufen werden, welches vorab geladen werden soll, also noch eine Funktion.
function vorabladen()
{
lade("bild1.gif")
lade("bild2.jpg")
lade("bild3.png")
}
Diese Ladefunktion wird aktiviert, wenn das Dokument selbst geladen ist, also am besten mit dem Event-Handler onLoad bei dem HTML-Start-Tag <body ...>.
<body ... onLoad="vorabladen()">
Einen Gedanken sollte man noch der JavaScript-Version widmen. Insbesondere das genutzte Array ist erst ab JavaScript 1.1 verfügbar. Also muss auch das Skript mit der entsprechenden Version definiert werden. Damit es bei älteren Browsern nicht zu Problemen kommt, definiert man vor dem eigentlichen Skript eine leere Funktion mit passendem Namen. Diese wird bei passender JavaScript-Version vom folgenden Skript überschrieben.
<script language="JavaScript">
<!--
function vorabladen() {}
//-->
</script>
Den Quelltext der Lösung finden Sie auf der CD unter \kapitel06\uebungen\uebung0601.html.
Das Vorabladen kennen wir vom Prinzip her bereits aus der vorangegangenen Übung. Für jeden Button müssen zwei Bilder geladen werden, jeweils eines für den Normalzustand und eines, falls sich der Mauszeiger darüber befindet.
Die Ladefunktion im Vergleich zur vorigen Lösung ein wenig abgewandelt:
function button(dateiname_normal, dateiname_aktiv)
{
this.aktiv = new Image()
this.normal = new Image()
this.aktiv.src = dateiname_aktiv
this.normal.src = dateiname_normal
}
Dazu wird eine passende Initialisierungsfunktion und das Array definiert. Das Bild in unserem Beispiel heißt übrigens meinButton. Praktischerweise wird dieser Name auch als Index für das Array genutzt.
var bilder = new Array()
function initialisierung()
{
bilder["meinButton"] = new button("bild1.gif", "bild2.gif")
}
Letztlich wird bereits im Kopf des Dokuments diese Initialisierungsfunktion aufgerufen:
initialisierung()
Damit ist der Ladevorgang abgeschlossen. Es fehlen noch zwei Funktionen, die helfen, das passende Bild zu setzen. Für das Bild im aktiven Zustand - also wenn sich der Mauszeiger darüber befindet - wäre das die Funktion
function aktivbild(name)
{
document.images[name].src = bilder[name].aktiv.src
}
und für das normale Bild die folgende Funktion
function normalbild(name)
{
document.images[name].src = bilder[name].normal.src
}
Neben dem Bild müssen auch die Event-Handler definiert werden. Die passenden finden sich bei dem Link: onMouseOver und onMouseOut.
<a href="..."
...
onMouseOver="aktivbild('meinButton')"
onMouseOut="normalbild('meinButton')"><img src="bild1.gif"
name="meinButton"
border="0"
width="160" height="120" alt="Button"></a>
Da auch hier JavaScript 1.1 Voraussetzung ist, muss darauf geachtet werden, Ersatzfunktionen für Browser mit älteren Versionen zu definieren.
Bleibt vielleicht noch eine Frage zu klären: Warum wird die Funktion initialisierung diesmal nicht mit onLoad bei dem HTML-Start-Tag <body ...> aufgerufen? Denken Sie einmal an den zeitlichen Ablauf. Erst wird das Dokument geladen - damit existiert auch der Link mit den Event-Handlern -, dann wird initialisiert. So könnte es passieren, dass der Link bereits genutzt wird, bevor die Bilder und die JavaScript-Deklarationen dafür da sind! Mit dem Aufruf im Header werden diese Deklarationen bereits durchgeführt, bevor irgendein Bestandteil des Dokuments erscheint.
Den Quelltext der Lösung finden Sie auf der CD unter \kapitel06\uebungen\uebung0602.html.
Im Vergleich zur vorigen Übung wird erst einmal die Ladefunktion angepasst. Sie muss nun prinzipiell vier (eigentlich sogar nur drei) statt zwei Bilder laden.
function button(dateiname_out, dateiname_over, dateiname_down)
{
this["over"] = new Image()
this["out"] = new Image()
this["down"] = new Image()
this["up"] = new Image()
this["over"].src = dateiname_over
this["out"].src = dateiname_out
this["down"].src = dateiname_down
this["up"].src = dateiname_over
}
Bei der Initialisierungsfunktion ändert sich lediglich der Aufruf der gerade definierten Funktion button.
bilder["meinButton"] = new button("bild1.gif",
"bild2.gif",
"bild3.gif")
Die Funktion, die für den Wechsel der Bilder sorgt, ist etwas allgemeiner gefasst:
function bild(evnt, name)
{
document.images[name].src = bilder[name][evnt].src
}
Letztlich ist auch der Link um zwei Event-Handler - onMouseDown und onMouseUp - zu erweitern:
<a href="..."
...
onMouseOver="bild('over', 'meinButton')"
onMouseOut="bild('out', 'meinButton')"
onMouseDown="bild('down', 'meinButton')"
onMouseUp="bild('up', 'meinButton')">...
Ansonsten gilt das, was schon bei der vorigen Übung genannt wurde.
Den Quelltext der Lösung finden Sie auf der CD unter \kapitel06\uebungen\uebung0603.html.
Die zentralen Event-Handler für diese Aufgabe sind die Event-Handler onLoad, onError und onAbort, die dem HTML-Tag <img ...> des HTML-Elements hinzugefügt werden.
Für die Meldung, falls das Bild erfolgreich geladen wurde, wäre das eine Funktion wie diese:
function evnt_load(img)
{
alert("Bild" +
((img.name == "") ? "" : (" \"" + img.name + "\"")) +
" geladen!")
}
Im Fehlerfall sieht dies ähnlich aus:
function evnt_error(img)
{
alert("Fehler beim Laden des Bilds" +
((img.name == "") ? "" : (" \"" + img.name + "\"")) + "!")
}
Auch der Fall des abgebrochenen Ladevorgangs ist analog aufgebaut:
function evnt_abort(img)
{
alert("Ladevorgang des Bilds" +
((img.name == "") ? "" : (" \"" + img.name + "\"")) +
" abgebrochen!")
}
Die Funktionen werden mit den passenden Event-Handlern aufgerufen:
<img src="..."
...
onLoad="evnt_load(this)"
onError="evnt_error(this)"
onAbort="evnt_abort(this)">
Den Quelltext der Lösung finden Sie auf der CD unter \kapitel06\uebungen\uebung0604.html.
Hier gibt es grundsätzlich zwei Lösungsansätze. Bei dem ersten wird eine Funktion per Event-Handler gestartet und danach läuft nur noch ein zeitgesteuertes Skript. Der zweite startet die Anzeige eines neuen Bilds jeweils eventgesteuert.
Die Bilder sollten alle die gleiche Größe haben. Allerdings muss der Dateityp nicht einheitlich sein. JPEG- oder PNG-Bilder sind ebenso wie GIF-Bilder gestattet.
Beide Lösungen nutzen übrigens JavaScript 1.2-Funktionalitäten. Daher ist bei der Gestaltung der Skripte darauf zu achten, für ältere Browser Ersatzfunktionen vorzusehen.
Der Ansatz geht davon aus, dass das Animationsskript an einer Stelle gestartet wird und dann abläuft. Dazu bietet sich der Start mit dem Event-Handler onLoad bei dem Start-Tag <body ...> an.
Die eigentliche Animation wird in einem Array abgelegt, jeweils mit dem Dateinamen datei, der Anzeigedauer zeit und einem Platzhalter bild für das korrespondierende Objekt vom Typ Image.
function neues_bild(datei, zeit)
{
this.datei = datei
this.zeit = zeit
this.bild = null
}
var animation = new Array()
animation[animation.length] = new neues_bild("bild1.gif", 2000)
animation[animation.length] = new neues_bild("bild2.gif", 2000)
animation[animation.length] = new neues_bild("bild3.gif", 2000)
Ferner wird eine globale Variable definiert, in der das aktuell angezeigte Bild gemerkt wird.
var bild = -1
Die gesamte Animation wird vorab geladen, damit der Bildwechsel verzögerungsfrei erfolgt.
function vorbereiten()
{
var i
for(i = 0; i < animation.length; i++)
{
animation[i].bild = new Image()
animation[i].bild.src = animation[i].datei
}
}
Die Startfunktion ist gleichzeitig die Funktion, die auch für den Bildwechsel zuständig ist. Hier wird der Bildzähler weitergezählt, das Bild ausgetauscht und am Ende die Funktion selbst wieder aufgerufen - mit dem passenden Zeitversatz. Das Bild trägt hier übrigens den Namen animation.
function start()
{
bild++
if(bild >= animation.length)
bild = 0
document.images["animation"].src = animation[bild].bild.src
setTimeout("start()", animation[bild].zeit)
}
Sowohl die Funktion für das Vorabladen der Bilder wie auch der Start der Animation wird mit dem Event-Handler onLoad des HTML-Elements body beim Start-Tag <body ...> aktiviert.
<body ... onLoad="vorbereiten(); start()">
Nicht zu vergessen, dass im HTML-Text ein Bild angelegt werden muss, damit das für das Skript notwendige Image-Objekt auch existiert:
<img ... name="animation">
Den Quelltext der Lösung finden Sie auf der CD unter \kapitel06\uebungen\uebung0605a.html.
Bei diesem Ansatz wird das Folgebild angefordert, wenn das aktuelle fertig geladen ist. Es bietet sich also wieder der Event-Handler onLoad an, diesmal allerdings eingesetzt bei dem HTML-Element <img ...>.
Dieser Lösungsansatz nutzt die gleichen Vorabladefunktionen wie der Lösungsansatz A. Lediglich der Bildzähler beginnt mit dem Wert 0 statt -1.
var bild = 0
Die Funktion für den Bildwechsel ist in zwei Aufgabenteile getrennt. Der erste sorgt nur für den eigentlichen Wechsel:
function wechsle_bild(name, nr)
{
document.images[name].src = animation[nr].bild.src
}
Dann fehlt noch der Aufruf der gerade definierten Funktion und vorher natürlich das Weiterzählen. Der Aufruf des Folgebilds erfolgt hier zeitversetzt.
function naechstes_bild(img)
{
bild++
if(bild >= animation.length)
bild = 0
setTimeout("wechsle_bild('" + img.name + "'," + bild + ")",
animation[bild].zeit)
}
Sicherheitshalber wird die Funktion für die Vorbereitungen noch im Header aufgerufen.
vorbereiten()
Das Bild für die Animation ist letztendlich noch durch den Event-Handler onLoad mit dem Aufruf der Funktion naechstes_bild zu erweitern.
<img ... name="animation" onLoad="naechstes_bild(this)">
Den Quelltext der Lösung finden Sie auf der CD unter \kapitel06\uebungen\uebung0605b.html.
Optimiert für HTML- & CSS-Browser.
Bestes Ergebnis mit Mozilla und Opera.JavaScript basiert auf W3C-DOM.
Wir unterstützen Standards!
Copyright 2000-2004 Christine Kühnel & Stefan Mintert. Alle Rechte vorbehalten. Online-Fassung: Christine Kühnel http://screenexa.net/
