HTML-Dateien selbst erstellen
	Dokumentation: JavaScript
		JavaScript Anwendungsbeispiele

Dynamische grafische Buttons

Kurzbeschreibung
Quellcode
Erläuterungen zum Quellcode
Beispiel testen: so sieht's aus

Kurzbeschreibung

Auf WWW-Seiten kommen häufig grafische Buttonleisten zum Einsatz, die Verweise zu bestimmten Seiten des Projekts enthalten. Wenn der Anwender mit der Maus über solche Grafiken fährt, erkennt er am veränderten Mauscursor und an den Verweiszielanzeigen in der Statuszeile des WWW-Browsers, daß es sich um Verweise handelt. Mit Hilfe von JavaScript können Sie solche grafischen Verweise jedoch noch deutlicher kenntlich machen und der Benutzerführung gleichzeitig ein wenig mehr Pep verleihen.

Dazu brauchen Sie je zwei gleichartige, farblich unterschiedliche Grafiken für je einen Grafikbutton. Im Anzeigebeispiel zu diesem Abschnitt sind das die beiden folgenden Button-Paare:

Altavista normal Altavista aktiviert
Lycos normal Lycos aktiviert

Mit Hilfe von JavaScript läßt sich nun eine Grafik durch eine andere ersetzen, zum Beispiel, wenn die Grafik als Verweises dient und der Anwender mit der Maus über die Grafik fährt. Wie das im einzelnen funktioniert, wird im folgenden beschrieben.

Beachten Sie:

Dieses Beispiel funktioniert derzeit nur mit Netscape ab Version 3.x. Mit dem MS Internet Explorer ist die Anzeige nicht möglich. Das Beispiel ist jedoch so programmiert, daß es keine Beeinträchtigung in der Benutzerführung gibt, wenn der Anwender nicht Netscape verwendet oder JavaScript ausgeschaltet hat.

Quellcode

Anzeigebeispiel: So sieht's aus

Studieren Sie das Beispiel aufmerksam und lesen Sie anschließend die Erläuterungen dazu. Zur besseren Orientierung enthält das Beispiel Verweise zu den entsprechenden Erläuterungen, z.B. (1). Diese Verweise gehören nicht zum Quellcode. Falls Sie das Beispiel in einen Editor kopieren, müssen Sie diese Verweise löschen. Andernfalls erhalten Sie JavaScript-Fehlermeldungen.

Quellcode:

<html>
<head>
<title>Hier den Titel der Datei eingeben</title>
<script language="JavaScript">
<!--
(1)
Neubild1 = new Image(); 
Neubild1.src = "button1b.gif";   /* Hier erste Highlight-Grafik angeben */

Neubild2 = new Image();
Neubild2.src = "button2b.gif";  /* Hier zweite Highlight-Grafik angeben */

/* usw... (obiges Schema für alle weiteren gewünschten Highlight-Grafiken weiterführen) */

(2)
Bilder = new Array(window.document.images.length);
for(Zaehler=0;Zaehler<window.document.images.length;Zaehler++)
  Bilder[Zaehler] = window.document.images[Zaehler].src;

(3)
function BildOver(Index,Neubild)
{
 window.document.images[Index].src = Neubild.src;
}

(4)
function BildOut(Index)
{
 window.document.images[Index].src = Bilder[Index];
}
 //-->
 </script>
 </head>
<body>

(5)
<table><tr><td>
<a href="index.htm" onMouseOver="BildOver(0,Neubild1)" onMouseOut="BildOut(0)">
<img src="button1a.gif"></a> 
</td><td>
<a href="verweise.htm" onMouseOver="BildOver(1,Neubild2)" onMouseOut="BildOut(1)">
<img src="button2a.gif"></a> 
</td></tr></table>

</body>
</html>

Erläuterungen zum Quellcode

(1) Neue Grafikobjekte für Highlight-Grafiken erzeugen
Beim Einlesen der Datei sollen im Beispiel auch gleich diejenigen Grafiken mit eingelesen werden, die zunächst nicht angezeigt werden sollen, sondern erst, wenn der Anwender mit der Maus über bestimmte andere Grafiken fährt. Denn nur wenn sich alle dynamisch austauschbaren Grafiken im Arbeitsspeicher befinden, funktioniert der dynamische Wechsel problemlos.

Für jede Grafik, die Sie dynamisch anzeigen möchten, die aber nicht im Quelltext der normalen HTML-Datei referenziert wird, müssen Sie eine Instanz des Grafik-Objekts erzeugen. Dazu wird mit der Anweisung Neubild1 = new Image(); eine Objektinstanz erzeugt. Nachdem die Objektinstanz erzeugt ist, sind unter dem gewählten Objektnamen, hier Neubild1, alle Eigenschaften des Objekts ansprechbar. Zunächst enthält das Objekt noch gar keine Daten. Mit der Anweisung Neubild1.src = "button1b.gif"; wird dem neuen Grafikobjekt eine Grafikdatei zugewiesen. Es muß sich um diejenige Datei handeln, durch die Sie später eine bestimmte andere Grafik dynamisch ersetzen wollen.

Wiederholen Sie die beiden beschriebenen Anweisungen für jede weitere Grafikdatei, die Sie dynamisch "im Hintergrund" benötigen. Vergeben Sie dabei jedesmal einen neuen Objektnamen (etwa wie im Beispiel Neubild2 usw.). Im Beispiel werden nur zwei Grafiken dynamisch ersetzt, deshalb sind nicht mehr Anweisungen dieser Art erforderlich.

(2) Namen aller vorhandenen Grafiken merken
Das Beispiel soll ja bewirken, daß beim Überfahren der in einen Verweis eingebetteten Grafik eine Variante dieser Grafik angezeigt wird, die auf den Anwender wie ein Highlight-Signal wirkt. Wenn der Mauszeiger den verweis-sensitiven Bereich verläßt, soll wieder die ursprüngliche Grafik angezeigt werden. Deshalb merkt sich das JavaScript in einer Schleife die Namen aller in der HTML-Datei referenzierten Grafikdateien. Benötigt werden zwar nur die Namen derjenigen Grafiken, die dynamisch ausgetauscht werden sollen. Aber so ist dieser Code-Abschnitt allgemein gehalten, und Sie brauchen sich sonst nicht mehr darum kümmern.

Mit der Anweisung Bilder = new Array(window.document.images.length); wird mit der Variablen Bilder eine Instanz des Array-Objekts erzeugt. Das Objekt soll so viele Elemente haben, wie Grafiken in der Datei vorhanden sind. Dann kann in jedem Element des Arrays der Dateiname einer Grafik gespeichert werden. Die Anzahl der in der Datei referenzierten Grafiken steht in der Objekteigenschaft window.document.images.length.

In einer for-Schleife wird mit Hilfe einer Variablen Zaehler jedem Element des Arrays der Name der zugehörigen Grafikdatei zugewiesen.

(3) Funktion BildOver() zum Anzeigen von Highlight-Grafiken
Der bisherige Code im Beispiel wird beim Einlesen der HTML-Datei direkt ausgeführt, da er nicht in einer Funktion gebunden ist. Die Ausführung dieses Codes bewirkt aber keine sichtbaren Ausgaben und wird vom Anwender gar nicht bemerkt. Das, was am Bildschirm mit Hilfe von JavaScript passieren soll, nämlich das dynamische Austauschen eines Bildes, geschieht in den beiden definierten Funktionen.

Die Funktion BildOver() soll aufgerufen werden, wenn der Anwender mit der Maus über einen grafischen Verweis fährt. Dazu benötigt die Funktion zwei Parameter: die wievielte Grafik in der Datei ausgetauscht werden soll (Index), und durch welches zuvor definierte Grafikobjekt das Bild ersetzt werden soll (Neubild). Die Funktion kommt dann mit einer einzigen Anweisung aus. Diese Anweisung ersetzt das vorhandene Bild durch das neue. Beachten Sie hier den wichtigen Zusammenhang: das dynamische Ersetzen einer Grafik ist nur möglich, wenn für die neue Grafik zuvor eine Instanz des Grafikobjekts erzeugt wurde. Im Beispiel geschah dies ja ganz am Anfang des Scripts.

(4) Funktion BildOut() zum Wiederanzeigen der "normalen" Grafiken
Die Funktion BildOut() soll aufgerufen werden, wenn der Anwender mit der Maus über einen grafischen Verweis gefahren war und den verweis-sensitiven Bereich wieder verläßt. In diesem Fall soll wieder die "normale" Grafik angezeigt werden.

Die Funktion benötigt als Parameter nur die Angabe, die wievielte Grafik der Datei wieder zu ersetzen ist (Index). Welche Datei sich dahinter verbirgt, ermittelt die Funktion von selbst, da ja zuvor alle vorhandenen Grafikdateinamen in einem Array gespeichert wurden. Zum Austauschen der Grafik wird wiederum nur die eine Anweisung benötigt, die in der Funktion steht.

(5) Grafische Verweise mit Event-Handlern für Mausbewegungen des Anwenders
Damit der gewünschte Effekt zustande kommt, müssen Sie in der HTML-Datei Grafiken als Verweise definieren. Bei Buttons, die nebeneinander liegen sollen, empfiehlt sich eine blinde Tabelle, wie sie auch im Beispiel verwendet wird.

Im einleitenden Verweis-Tag werden die Event-Handler onMouseOver= und onMouseOut= notiert. Bei onMouseOver= (wenn der Anwender mit der Maus über den verweis-sensitiven Bereich, hier eine Grafik fährt) wird die im Script-Bereich definierte Highligt-Funktion BildOver() aufgerufen. Bei onMouseOut= (wenn der Mauszeiger den verweis-sensitiven Bereich wieder verläßt) wird die ebenfalls definierte Rücksetzfunktion BildOut() aufgerufen.

Beim Aufruf von BildOver() werden die beiden benötigten Parameter übergeben. Zählen Sie dazu die referenzierten Grafikdateien in der HTML-Datei, aber fangen Sie bei 0 an zu zählen, d.h. 0 für die erste Grafik, 1 für die zweite Grafik usw. Übergeben Sie den Indexwert der Grafik, die in den Verweis eingebettet ist. Im Beispiel sind nur zwei Grafiken referenziert. Deshalb wird im ersten Fall 0 übergeben, im zweiten Fall 1. Beim zweiten Parameter übergeben Sie den Objektnamen für das gewünschte Grafikobjekt. Das ist einer der Namen, die Sie am Anfang des Script-Bereichs vergeben haben. Im Beispiel wird im ersten Fall Neubild1 übergeben, im zweiten Fall Neubild2.

Beim Aufruf von BildOut() brauchen Sie nur noch den Index der gewünschten Grafik anzugeben. Übergeben Sie jeweils den gleichen Wert wie zuvor beim Aufruf von BildOver(). Im Beispiel wird also im ersten Fall 0 übergeben, im zweiten Fall 1.

Blättern:

Persönliche Seitenbesuche zählen mit Cookies WWW-gerechte Grafiken

HTML-Dateien selbst erstellen

Dokumentation: JavaScript

JavaScript Anwendungsbeispiele

Stefan Münz, muenz@compuserve.com

	Blättern:
Persönliche Seitenbesuche zählen mit Cookies			WWW-gerechte Grafiken