Ein sehr häufiges Einsatzgebiet von JavaScript sind dynamische Buttons. Aus optischen Gründen verwenden viele Websites statt der üblichen Textlinks Links in der Form <a href="weiter.html"> <img src="weiter.gif" width="250" height="100" border="0"> </a> Auf den Rahmen, der gezeichnet wird, wenn border nicht auf Null gesetzt wird, wird aus ästhetischen Gründen fast immer verzichtet. Der Nachteil dieses Buttons ist nun, das der Benutzer nur eine geringe optische Rückmeldung erhält, wenn der Mauszeiger sich über dem Verweis befindet. Bei einem Textlink ändert sich i.d.R. die Farbe des Textes und die Form des Mauszeigers. Ersteres fällt bei einem grafischen Link ohne Rand weg. Zweiter Gesichtspunkt - und der ist für viele Webseiten sicherlich wichtiger - ist ein optischer: es sind einfach vielfältigere optische Gestaltungsmöglichkeiten vorhanden. Dank JavaScript lassen sich Grafiken beim Überfahren austauschen - und das klappt auch mit Netscape 3.0 und Light of Adamas. Im Web wird dieser Effekt häufig als "Rollover" oder "Mouseover" bezeichnet. Erhöhter Speicherbedarf Da für jeden Button zwei Zustände vorhanden sein sollen, werden
auch zwei Grafiken benötigt. Das erhöht natürlich das Volumen
der Seite, da für jede kleine Grafik eine Serververbindung aufgebaut
werden muss. Auch aus Gründen der Übersichtlichkeit sollte die
Anzahl der Navigationspunkte so klein wie möglich gehalten werden -
fünf Rubriken reichen oftmals völlig aus. Größen Bloß weil sich eine Grafik gegen eine andere austauschen lässt, heißt das noch lange nicht, das damit gleich eine dynamische Seite geschaffen wäre. Die beiden Grafiken, die zusammen den Rollover-Effekt ergeben sollen, müssen die gleiche Größe haben. Zwar stört es den Browser auch nicht, wenn ihre Größe voneinander abweicht, aber dann bringt der Browser selbst sie auf eine einheitliche Größe, was zu unansehnlichen Verzerrungen führt. Grafiken erstellen Um die Grafiken zu erstellen, kann jedes Grafikprogramm benutzt werden. Am
bequemsten ist natürlich eines, das auch gleich das GIF- oder JPEG-Format
exportieren kann. Das vorliegende Beispiel wurde mit Smurf erstellt. Hier wurde
zuerst ein 250*100 Pixel großes Bild geöffnet und mit dem Text-Modul
der Schriftzug "ScriptPower" reingesetzt. Das erste Bild ist damit fertig und
stellt den nicht aktivierten Zustand dar. Programmierarbeit Da nun zwei Bilder vorliegen, kann ein erster einfacher Rollover-Effekt programmiert werden. Damit der Rollover-Effekt auch flüssig wird, werden die beteiligten Grafiken vorgeladen (preloading). Es müssen sowohl die "aktive" als auch die "nicht aktive" Grafik vorgeladen werden. Für das vorladen wird das image-Objekt benötigt: <html> <head> <title>Ein Rollover-Beispiel</title> <script type="text/javascript"> <!- aktiv1 = new Image(); aktiv1.src = "aktiv1.gif"; aktiv2 = new Image(); aktiv2.src = "aktiv2.gif"; Mit new Image() wird eine neue Objektinstanz erzeugt. Diese Objektinstanz
hat alle Eigenschaften eines "normalen" Bildes. Da JavaScript nicht wissen
kann, welche Grafik das Objekt verwenden soll, wird in der nächsten Zeile
die Quelle bestimmt. Für die grundlegende Definition eines
Rollover-Effektes werden immer vier Zeilen benötigt.
function bildaustauschen(bildnr, bildobjekt) {
window.document.images[bildnr].src = bildobjekt.src;
}
Jedes Grafik, die im HTML-Quellcode mit dem <IMG>-Tag referenziert
wird, trägt intern eine Nummer. Diese wird mit Null beginnend vergeben und
richtet sich einfach nach der Reihenfolge im Quelltext. Jede referenzierte
Grafik kann auch ausgetauscht werden. Das kann gerade am Anfang oder bei
Seitenänderungen zu ungewollten Effekten führen, wenn die falsche
Bildnummer angesprochen wird. Wenn so viele Grafiken vorhanden sind, das keine
Übersicht mehr herrscht, kann über die Info-Funktion von Netscape
oder die HTML-Info von HTML-Help eine genaue Auflistung aller Grafiken
angezeigt werden. //--> </script> Jetzt folgt der HTML-Code. Da dies nur ein rudimentäres Beispiel sein soll, hält sich dieser vom Umfang her in Grenzen: </head> <body> <a href="http://www.st-computer.net" onMouseOver="bildaustauschen(0,aktiv2)" onMouseOut="bildaustauschen(0,aktiv1)"><img src="aktiv1.gif" width="250" height="100" border="0" alt="ScriptPower"></a> </body> </html> onMouseOver (beim rüberfahren mit der Maus) ist ein sogenannter
Event-Handler. Innerhalb des Event-Handlers wird die JavaScript-Funktion zum
Austauschen des Bildes aufgerufen. <img src="dummy.gif" width="1" height="1"> <img src="aktiv1.gif" width="250" height="100" border="0" alt="ScriptPower"> ...müsste die Bildnummer "1" lauten. Gerade die sogenannten "Dummy-Bilder" werden gerne beim Zählen vergessen. Der Browser zählt jedoch auch diese mit. Matthias Jaap |