JavaScript - Dynamische Buttons
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.
Es sei übrigens erwähnt, das der Internet Explorer auch mit einer Grafik einige Effekte erzeugen kann - Microsofts Browser hat einige Filter (Invertieren, Wellen etc.) eingebaut, die auf Grafiken angewendet werden können. Diese Filter haben sich jedoch nicht durchgesetzt.
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.
Der aktive Zustand ist das Bild, das erscheint, wenn sich der Mauszeiger über dem Verweis befindet. Es ergibt Sinn, dass die beiden Bilder sich ähneln, um den Seitenbesucher nicht unnötig zu verwirren. In diesem Fall wurde einfach ein Drop Shadow Effekt hinzugefügt. Auch dieses Bild wird im GIF-Format abgespeichert.
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.
Als nächstes notieren wir die Funktion die für den Austausch verantwortlich ist:
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.
Beim genaueren Blick auf die Zeile in der Funktion wird auch klar, weshalb sowohl die aktive als auch nicht aktive Grafik vorgeladen werden muss - die nicht aktive Grafik, die üblicherweise schon im <IMG>-Tag referenziert ist, würde sonst nach dem ersten Überfahren mit der Maus verloren gehen, da mit der Anweisung der Inhalt des "src"-Attributs ausgetauscht wird.
Wir schließen den JavaScript-Teil damit ab:
//--> </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.
Das Pendant zu onMouseOver ist onMouseOut. Es würde nicht sehr professionell aussehen, wenn das aktive Bild nach dem Weiterbewegen des Mauszeigers einfach stehenbleiben würde. Der erste Parameter von bildaustauschen ist die Bildnummer. Würde sich vor dem -Tag ein weiteres Bild befinden...
<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.
Mia Jaap