Um das programmiertechnische Problem zu lösen, muß man zunächst einige Dinge abstrakt klären. Wie dargestellt benötigt man für einen sensitiven Button zwei Grafiken. Diese sollen im folgenden die Namen "grafik.gif" und "grafik_invers.gif" tragen und im Verzeichnis "gfx/" liegen. Ausserdem soll davon ausgegangen werden, dass ihre Abmessungen 100 x 50 Pixel betragen. Diese Grafiken müssen nun in das Dokument eingebunden werden. Dazu existiert in JavaScript ein Objekt "Image". Die diesem Image zuzuordnende Grafikdatei kann mittels der Eigenschaft "Src" festgelegt werden. In unserem Fall sähen die notwendigen Defintionen daher wie folgt aus:
bild = new Image();
bild.src = "gfx/grafik.gif";
bild_invers = new Image();
bild_invers.src = "gfx/grafik_invers.gif";
Als zweite Voraussetzung benötigen wir eine Funktion, die uns Mitteilung macht, wenn der Mauszeiger über den Bereich des Buttons fährt, um dann die zweite Grafik ausgeben zu können. Verläßt er den Bereich wieder, muß nun die normale Grafik gezeichnet werden. Eine Funktion, die dem JavaScript-Programm derartige Aktionen mitteilt, heißt "Event-Handler". Sie wird wie eine normale Option in einen HTML-Tag eingebunden. Für die hier interessierenden Zwecke gibt es die beiden Event-Handler
onmouseover="..."
und
onmouseout="..."
Nun fehlt eigentlich nur noch eines - der Teil der Routine, der die Grafiken zeichnet. Hierfür bietet sich die Definierung einer eigenen Objektinstanz als Grafik an, der dann nur noch die jeweiligen Images zugeorndet werden müssen. Der Instanz kann dabei ein beliebiger Name gegeben werden. Dies geschieht über die alt-Angabe im <img>-Tag.
<img name="anim_bild" src="gfx/grafik.gif">
richtet daher für das aktuelle Dokument (document) eine Instanz mit dem Namen "anim_bild" ein. Diese kann dann einfach über
document[anim_name].src = bild.src
bzw.
document[anim_name].src = bild_invers.src
den beiden grafischen Zuständen angepaßt werden. Damit steht eigentlich die Routine bereits in ihren wesentlichen Grundzügen. Ein Problem ergibt sich jedoch daraus, dass einige der hier verwendeten Methoden erst mit "JavaScript" 1.1 realisierbar sind. Verwendet man Browser, die diesen Standard nicht oder nicht vollständig beherrschen (z.B. "Netscape 2.0" oder "AWeb"), riskiert man unschöne Fehlermeldungen. Aus diesem Grund können die Änderungen der Dokumenteninstanzen nicht unmittelbar innerhalb des <a>-Tags erfolgen. Vielmehr muß ein weiterer Trick herhalten.
JavaScript-Codesequenzen müssen durch ein <script>-Kommando eingeleitet werden. Innerhalb dieses Tags kann dann die zu verwendende Sprache festgelegt werden - inklusive Versionsnummer. Da JavaScript bei doppelt vorkommenden Funktionsnamen die zuletzt definierte verwendet, bietet sich als Lösung des Problems die doppelte Definierung einer Anzeigefunktion sowohl für den normalen, als auch für den "invertierten" Zustand der Grafik an. Im Überblick sähe das ganze dann so aus:
<script language="JavaScript">
<!--
function show_bild_invers()
{
}
function show_bild()
{
}
// -->
</script>
<script language="JavaScript1.1">
<!--
function show_bild_invers(name)
{
document[name].src = bild_invers.src
}
function show_bild(name)
{
document[name].src = bild.src;
}
// -->
</script>
Browser, die mit JavaScript 1.1 umgehen können, bekommen die "richtigen" Funktionsdefinitionen vorgesetzt, die anderen, die lediglich noch ältere JavaScript-Versionen beherrschen, werden mit gleichnamigen Funktionen vertraut gemacht. Diese sind jedoch reine "Dummies", haben keinerlei Auswirkungen auf die Dokumentdarstellung und erzeugen vor allem keine Fehlermeldungen. Dieser Umweg, der aus Gründen der Abwärtskompatibilität notwendig ist, erscheint zunächst umständlich und kompliziert. Da man jedoch in der Regel mehrere Buttons in einem Dokument haben wird, bietet sich die Lösung über eigene Anzeigefunktionen in Kombination mit zu Feldern (Arrays) zusammengefügten Image-Informationen als dann auch wieder programmökonomisch sinnvolle Realisierung an. Die "Show"-Funktionen und die Image-Defintionen wären entsprechend zu modifizieren, also etwa in dieser Form:
<script language="JavaScript1.1">
<!--
bilder = new Array();
bilder[0] = new Image();
bilder[0].src = "gfx/grafik0.gif";
bilder[1] = new Image();
bilder[1].src = "gfx/grafik1.gif";
function show_bild(name,nummer)
{
document[name].src = bilder[nummer].src
}
// -->
</script>
Für das hier gewählte Beispiel soll es jedoch mit einem Bild seine Bewandtnis haben. Es sieht dann in der endgültigen Fassung wie folgt aus:
<!doctype HTML public "-//W3O//DTD W3 HTML 3.2//EN">
<html>
<head>
<script language="JavaScript">
<!--
function show_bild_invers()
{
}
function show_bild()
{
}
// -->
</script>
<script language="JavaScript1.1">
<!--
bild = new Image();
bild.src = "gfx/grafik.gif";
function show_bild(name)
{
document[name].src = bild.src;
}
bild_invers = new Image();
bild_invers.src = "gfx/grafik_invers.gif";
function show_bild_invers(name)
{
document[name].src = bild_invers.src
}
// -->
</script>
</head>
<body>
<p>
<a href="datei.html"
onmouseover="show_bild_invers('anim_bild')"
onmouseout="show_bild('anim_bild')"
target="MAIN">
<img name="anim_bild"
src="gfx/grafik.gif"
alt="Sensitiver Button"
width=100
height=50
border=0>
</a>
</p>
</body>
</html>
Ein Anwendungsbeispiel dieser Methode kann übrigens im linken Frame der Seite unter http://www.jura.uni-marburg.de/sonstiges/info/netwelcome.html begutachtet werden. Mit Hilfe dieser Routine kann man, ohne die Benutzer älterer Browser zu verprellen, seinen WWW-Seiten ein interessantes und, bei sachgerechter Anwendung, ansehnliches Gestaltungselement hinzufügen. Aber auch hierbei gilt es bitte, Bandbreite nicht überflüssig zu verschwenden. Denn wichtiger als alles Äußerliche bleibt beim Informationsmedium WWW die Geschwindigkeit.
