|
Was im Leben uns verdrießt,
man im Bild gern genießt.
– Johann Wolfgang von Goethe Kapitel 11 Grafiken
Das Image-Objekt ermöglicht einen der beliebtesten JavaScript-Effekte im World Wide Web. Es tauchte zum ersten Mal in einer Beta-Version des Netscape Navigator 3 auf. Damit war es erstmals möglich, mit JavaScript einzelne Grafiken eines HTML-Dokuments anzusprechen. Besonders pfiffig – und praktisch – war die Möglichkeit, Grafiken auszutauschen, was Animationen und andere grafische Effekte ermöglicht.
Zu ungefähr derselben Zeit wurde die Version 3 des Microsoft Internet Explorer veröffentlicht. Da sich das Konkurrenzprodukt aus dem Hause Netscape noch in der Beta-Testphase befand, wurde das Image-Objekt nicht mehr in den JavaScript-Funktionsumfang des Internet Explorer übernommen. Die Macintosh-Variante des »IE3« kam etwas später als das Windows-Pendant heraus, und da sich das Image-Objekt bei Webdesignern großer Beliebtheit erfreute, wurde eine rudimentäre Unterstützung für den flotten Bildertausch in den Browser integriert. Ab Version 4 unterstützt der Internet Explorer übrigens auf allen Plattformen das Image-Objekt, und zwar vollständig.
Mittlerweile ist allerdings jede Vorsicht unangebracht, da alle halbwegs modernen JavaScript-fähigen Browser das Objekt unterstützen.
11.1 Bildlein-Wechsle-Dich  
Doch was war es, das den Webdesignern so gut am Image-Objekt gefiel? JavaScript wurde bis dato hauptsächlich für Laufschriften und für Formulare benutzt. Hier war es zum ersten Mal auch möglich, mit JavaScript grafische Effekte zu schaffen. Eine der Hauptanwendungen wird lapidar mit »Mouseovers« bezeichnet. Fährt die Maus über eine Grafik, so ändert diese ihre Gestalt; befindet sich die Maus dann nicht mehr über der Grafik, nimmt diese wieder ihre ursprüngliche Gestalt an.
Zwar ist es nicht möglich, eine Grafik zu manipulieren (etwa die Farbpalette zu verändern o. Ä.), aber man kann die Grafik einfach austauschen. In Abbildung 11.1 sehen Sie zwei Grafiken, galileo_over.gif und galileo_out.gif. Unser Ziel ist es nun, die Grafik galileo_out.gif anzuzeigen. Nur wenn sich der Mauszeiger über der Grafik befindet, soll die Grafik galileo_over.gif angezeigt werden.
Hier klicken, um das Bild zu Vergrößern
Abbildung 11.1 Die beiden Grafiken für den Mouseover-Effekt
Der folgende Code erfüllt die Anforderungen; eine Erläuterung folgt anschließend.
<html>
<head>
<title>Bildlein-Wechsle-Dich</title>
<script type="text/javascript"><!--
function over(){
document.grafik.src = "galileo_over.gif";
}
function out(){
document.grafik.src = "galileo_out.gif";
}
//--></script>
</head>
<body>
<a href="https://www.rheinwerk-verlag.de/?GPP=openbook">
<img src="galileo_out.gif" name="grafik"
onmouseover="over();" onmouseout="out();" />
</a>
</body>
</html>
Wenn Sie überprüfen möchten, ob der Webbrowser überhaupt das Image-Objekt unterstützt, können Sie das wie folgt tun:
if (document.images) {
// mit dem Image-Objekt arbeiten
}
Wenn es das Image-Objekt gibt, hat document.images einen Wert ungleich false – die if-Bedingung ist also erfüllt. Mit diesem kleinen Trick werden wir im Verlaufe dieses Buches noch an der einen oder anderen Stelle überprüfen, ob ein Browser ein bestimmtes Feature erfüllt oder nicht.
11.1.1 Zugriff auf Grafiken 
Es gibt mehrere Möglichkeiten, auf Grafiken in einem HTML-Dokument zuzugreifen:
 |
document.grafikname |
| |
document.images[grafikname] |
| |
document.images[grafiknummer] |
Hierbei steht grafikname für den Wert des name-Attributs der jeweiligen Grafik und grafiknummer für die laufende Nummer der Grafik im HTML-Dokument. Da alle Grafiken im Array document.images gespeichert werden, beginnt die Zählung bei 0.
Im Beispielcode von oben kann man also die Grafik folgendermaßen ansprechen:
| |
document.grafik |
| |
document.images["grafik"] |
| |
document.images[0] |
In der Regel entscheidet man sich für die erste Methode; achten Sie also darauf, Ihren Grafiken eindeutige und einprägsame name-Attribute zu geben, und verwenden Sie dabei keine gefährlichen Zeichen wie etwa Punkte (dann müsste man Methode 2 oder 3 zum Ansprechen der Grafik verwenden).
Die interessanteste und auch wichtigste Eigenschaft des Image-Objekts ist src: Das ist die URL der Grafik. Mit JavaScript hat man sowohl Lese- als auch Schreibzugriff auf diese Eigenschaft – ändert man also ihren Wert, wird die neue Grafik geladen. Das Thema »Dynamisches HTML« ist allerdings erst in Kapitel 17 an der Reihe. Sie können so nur eine Grafik durch eine andere austauschen; Rahmenparameter wie etwa Breite, Höhe und Position der Grafik können nicht verändert werden. Sie sollten also stets gleich große Grafiken verwenden; andernfalls wird die neue Grafik gestaucht oder gestreckt dargestellt.
Somit sind zwei Zeilen des obigen Codes erklärt: Mit document.grafik. src="galileo_over.gif" wird die Grafik galileo_over.gif anstelle der alten Grafik geladen und dargestellt; analog erklärt sich die Wirkungsweise von document.grafik.src="galileo_out.gif".
Die beiden Funktionen over() und out() werden durch die Event-Handler onmouseover und onmouseout aufgerufen. Sie erinnern sich: Wie der Name schon andeutet, wird der erste Event-Handler tätig, wenn die Maus über das Objekt (hier: den Link) fährt, und onmouseout tritt in Aktion, wenn die Maus das Objekt (den Link) wieder verlässt.
»Nur« neuere Browser (Internet Explorer ab 4, Netscape ab 6) unterstützen die Event-Handler onmouseover und onmouseout beim <img>-Tag; wenn also nicht verlinkte Grafiken mit einem Mouseover-Effekt versehen werden sollen, muss – für maximale Browserkompatibilität – um die Grafik herum ein Link (etwa mit href="#") gebaut werden. Man kann trefflich darüber streiten, ob das heutzutage auch noch notwendig ist. Da aber eine grafische Veränderung meist mit einem Link einhergeht (ansonsten ist es oftmals sehr verwirrend für die Nutzer), kann man diesen Ansatz zumindest in Erwägung ziehen.
|
