SELFHTML: JavaScript / Anwendungsbeispiele / Dynamische grafische Buttons

SELFHTML/Quickbar JavaScript Anwendungsbeispiele

	Dynamische grafische Buttons
	Dynamische grafische Buttons - das Beispiel

Dynamische grafische Buttons - das Beispiel

Anzeigebeispiel: So sieht's aus

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:

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.

Dieses Beispiel funktioniert mit Netscape ab Version 3.x und mit dem MS Internet Explorer ab Version 4.x. Beachten Sie, daß es bei Verwendung dynamischer Grafiken in Tabellen innerhalb von Tabellen bei Netscape zu Verschiebungsproblemen kommen kann.

Hinweis: 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.

Beispiel:

 <html>
 <head>
 <title>Seitentitel</title>
 <script language="JavaScript">
  <!--
  1* Normal1 = new Image(); 
  Normal1.src = "button1a.gif"; /* Hier erste Standard-Grafik angeben */
  Highlight1 = new Image(); 
  Highlight1.src = "button1b.gif"; /* Hier erste Highlight-Grafik angeben */

  Normal2 = new Image(); 
  Normal2.src = "button2a.gif"; /* Hier zweite Standard-Grafik angeben */
  Highlight2 = new Image(); 
  Highlight2.src = "button2b.gif"; /* Hier zweite Highlight-Grafik angeben */

  /* usw. fuer alle weiteren zu benutzenden Grafiken */

  2* function Bildwechsel(Bildnr,Bildobjekt)
  {
   window.document.images[Bildnr].src = Bildobjekt.src;
  }
 //-->
  //-->
 </script>
 </head>
 <body>

 3* <table><tr><td>
 <a href="index.htm" onMouseOver="Bildwechsel(0,Highlight1)"
 onMouseOut="Bildwechsel(0,Normal1)">
 <img src="button1a.gif"></a> 
 </td><td>
 <a href="verweise.htm" onMouseOver="Bildwechsel(1,Highlight2)"
 onMouseOut="Bildwechsel(1,Normal2)">
 <img src="button2a.gif"></a> 
 </td></tr></table>

 </body>
 </html>

Erläuterung:

Neue Grafikobjekte für Highlight-Grafiken erzeugen
Für jede Grafik, die Sie dynamisch anzeigen möchten, müssen Sie eine Instanz des image-Objekts erzeugen. Das gilt sowohl für die Grafiken, die zunächst in der HTML-Datei referenziert werden, als auch für diejenigen, die beim Überfahren mit der Maus dynamisch angezeigt werden sollen.

Dazu wird im Beispiel mit Anweisungen wie Normal1 = new Image(); eine Objektinstanz erzeugt. Nachdem die Objektinstanz erzeugt ist, sind unter dem gewählten Objektnamen, im ersten Fall Normal1, alle Eigenschaften des Objekts ansprechbar. Zunächst enthält das Objekt noch gar keine Daten. Mit der Anweisung Normal1.src = "button1a.gif"; wird dem neuen Grafikobjekt eine Grafikdatei zugewiesen.

Wiederholen Sie die beiden beschriebenen Anweisungen für jede Grafikdatei, die von dynamischen Änderungen betroffen sein wird - und zwar sowohl für Grafiken, die im "Normalfall" angezeigt werden, als auch für Grafiken, die beim Darüberfahren mit der Maus dynamisch angezeigt werden. Vergeben Sie dabei jedesmal einen neuen Objektnamen.

Funktion Bildwechsel() zum dynamischen Austauschen von 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 der definierten Funktion Bildwechsel().

Die Funktion soll aufgerufen werden, wenn der Anwender mit der Maus über einen grafischen Verweis fährt, und wenn er den Verweisbereich mit der Maus wieder verläßt. Dazu benötigt die Funktion zwei Parameter: die wievielte Grafik in der Datei ausgetauscht werden soll (Parameter Bildnr), und durch welches zuvor definierte Grafikobjekt das Bild ersetzt werden soll (Parameter Bildobjekt). 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.

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 Funktion Bildwechsel() aufgerufen, ebenso bei onMouseOut= (wenn der Mauszeiger den verweis-sensitiven Bereich wieder verläßt).

Beim Aufruf von Bildwechsel() werden jeweils 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 in der Datei, 1 für die zweite Grafik usw. Übergeben Sie den Indexwert der Grafik, die in den Verweis eingebettet ist. Im Beispiel sind in der gesamten HTML-Datei keine anderen als die dynamisch zu tauschenden Grafiken referenziert. Deshalb wird im ersten Fall 0 (erste Grafik der Datei) übergeben, im zweiten Fall 1 (zweite Grafik der Datei).
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 z.B. Highlight1 bei onMouseover übergeben, und Normal1 bei onMouseout.


weiter:	Aufenthaltsdauer auf Web-Seite anzeigen
zurück:	Formulareingaben überprüfen

SELFHTML/Quickbar JavaScript Anwendungsbeispiele