| Bilder |
Image-Objekt
Ab Version 4 wird das Image-Objekt unterstützt.
Es kann auf folgende Weise referenziert werden:
document.grafikname
document.images[grafikname]
document.images[nr]
Die erste Methode verlangt eindeutige, einprägsame Namen, die im img-Tag mit name="name" zugewiesen werden.
Zweite Methode kann verwendet werden, wenn auch zum Beispiel auch document.forms[gleichername] existiert.
Auf das Feld src des Image-Objekt hat man Lese- und Schreibzugriff:
document.grafikname.src = "xxx.gif"
Beim Austauschen von Bildern solle jedoch darauf geachtet werden, dass Bilder durch gleichgroße Grafiken ersetzt werden, sonst müssen auch die Felder width und height verändert werden.
Verwenden des Image-Objekts unter Berücksichtigung älterer Browser.
Methode a)
Für ältere Browser werden, damit es nicht zu Fehlmeldungen kommt, Leerfunktionen eingebaut. Die Angabe im language-Attribut steuert die Ausführung für die unterschiedlichen Browser.
<SCRIPT LANGUAGE="JavaScript">
<!--
function over(){}
function out(){}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1">
<!--
function over(){
document.grafik.src = "galileo_over.gif"
}
function out(){
document.grafik.src = "galileo_out.gif"
}
//-->
</SCRIPT>
Methode b)
Einfacher ist es innerhalb der Funktion abzufragen, ob das Objekt unterstützt wird.
if (document.images)
...
Das Image-Objekt wird in der Regel durch mouseover angesprochen.
mouseover und mouseout unterstützt nur der IE im Image Tag. Also muß für alle anderen Browser ein A href mit # um das Bild gesetzt werden um die Handler verwenden zu können. (siehe Beispiel 17)
Das folgende Beispiel 17 tauscht Bilder beim überfahren mit der Maus aus (Roll-Over Images).
<HTML>
<HEAD>
<TITLE>Bildlein-Wechsle-Dich</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function over(){
if (document.images)
document.grafik.src = "in.gif"
}
function out(){
if (document.images)
document.grafik.src = "out.gif"
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" onMouseover="over()" onMouseout="out()">
<IMG SRC="out.gif" NAME="grafik">
</A>
</BODY>
</HTML>
GIF-Bilder können zwar als Animationen gestaltet werden (animated GIF), sind aber auf maximal 256 Fraben beschränkt. Animationen mit JPEG-Bildern lassen sich mit JavaScript verwirklichen.
<HTML>
<HEAD>
<TITLE>JPEG-Animation</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript"><!--
if (document.images)
var bilder = new Array("ani1.jpg", "ani2.jpg", "ani3.jpg", "ani4.jpg")
var naechstesBild = 0 //Array-Index der n‰chsten Bildes
var verzoegerung = 1000 //Verz&Mac246;gerung in Millisekunden
function animation(){
document.ani.src = bilder[naechstesBild]
naechstesBild++
if (naechstesBild==bilder.length)
naechstesBild = 0
setTimeout("animation()", verzoegerung)
}
//--></SCRIPT>
</HEAD>
<BODY onLoad="if (document.images) animation()">
<H3>Animation</H3>
<IMG SRC="ani1.jpg" NAME="ani">
</BODY>
</HTML>
Der Wechsel erfolgt nach Ablauf einer bestimmten Zeit mit der Methode timeout() von window. Dieser Befehl verzögert das Ausführen:
window.setTimeout(Befehl, Verzögerung);
Die Angabe der Zeitspanne erfolgt in Millisekunden.
5000 = 5 Sekekunden
Besonders bei Roll-Over Effekten ist es störend, wenn das alternative Bild erst dann vom Server geladen wird, wenn der Mauszeiger über das Bild fährt. Bei langsamen Leitungen entsteht dann eine Wartezeit, die den Effekt zerstört. Daher werden auch die Grafiken die noch nicht sofort angezeigt werden bereits im Hintergrund geladen. Beim Roll-Over können sie dann sofort aus dem Speicher heraus angezeit werden.
Der Trick besteht im Anlegen eines eigenen neuen Image-Objektes.
var img = new Image()
img.src = "ani1.jpg"
Den Aufruf für die Preload-Routine solle man naicht in den body-Tag schreiben, da der Handler onLoad erst abgearbeitet wird, wenn der Body vollständig abgearbeitet worden ist. Das kann dazu führe das der Benutzer bereits Roll-Over Effekte auslöst, bevor das Preload durchgeführt wurde.
<BODY onLoad="preload()">
Also sollte der Preload-Aufruf im JavaScript des Head eingefügt werden. Da er ausserhalb einer Funktion steht, wird er bereits beim Interpretieren des Head abgearbeitet.
<HTML>
<HEAD>
<TITLE>Bildlein-Wechsle-Dich</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function preload(){
img_over = new Image()
img_over.src = "in.gif"
}
function over(){
if (document.images)
document.grafik.src = img_over.src
}
function out(){
if (document.images)
document.grafik.src = "out.gif"
}
preload()
//--></SCRIPT>
</HEAD>
<BODY>
<A HREF="#" onMouseover="over()" onMouseout="out()">
<IMG SRC="out.gif" NAME="grafik">
</A>
</BODY>
</HTML>
Das Beispiel lässt sich durch das Abfragen der Handler onAbort und onError noch sinnvoll erweitern.
<HTML>
<HEAD>
<META HTTP-EQUIV="refresh" CONTENT="30;url=animation.htm">
<!-- nach 30 Sekunden wird die Seite animation.html geladen -->
<TITLE>Animation vorbereiten</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function fertig(){
if (document.images[0].complete && document.images[1].complete && document.images[2].complete && document.images[3].complete)
location.href = "animation.html"
}
function abbruch(){
alert("Sie wollen das Laden abbrechen? Na gut, wir leiten Sie weiter...")
location.href="animation.html"
}
function fehler(){
alert("Beim Laden einer der Grafiken ist ein Fehler aufgetreten. Wir leiten Sie trotzdem weiter...")
location.href="animation.html"
}
//--></SCRIPT>
</HEAD>
<BODY>
<H3>Animation l‰dt... Bitte warten...</H3>
<IMG SRC="ani1.jpg" onLoad="fertig()" onAbort="abbruch()" onError="fehler()" WIDTH=1 HEIGHT=1>
<IMG SRC="ani2.jpg" onLoad="fertig()" onAbort="abbruch()" onError="fehler()" WIDTH=1 HEIGHT=1>
<IMG SRC="ani3.jpg" onLoad="fertig()" onAbort="abbruch()" onError="fehler()" WIDTH=1 HEIGHT=1>
<IMG SRC="ani4.jpg" onLoad="fertig()" onAbort="abbruch()" onError="fehler()" WIDTH=1 HEIGHT=1>
</HTML>