SELFHTML: JavaScript / Anwendungsbeispiele / Dynamische grafische Buttons

SELFHTML/Navigationshilfen

JavaScript/DOM

Anwendungsbeispiele

Dynamische grafische Buttons

Hinweise zu diesem Beispiel
Quelltext mit Erläuterungen

Anzeigebeispiel: So sieht's aus

Hinweise zu diesem Beispiel

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, dass 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 ("Mouseover-Effekt").

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ässt 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, dass es bei Verwendung dynamischer Grafiken in Tabellen innerhalb von Tabellen bei Netscape zu Verschiebungsproblemen kommen kann.

Quelltext mit Erläuterungen

Das Beispiel zeigt eine vollständige HTML-Datei mit Buttonleiste und dem JavaScript zum Steuern der Mousover-Effekte.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Dynamische grafische Buttons</title>
<script type="text/javascript">
<!--
Normal1 = new Image();
Normal1.src = "button1.gif";     /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "button1h.gif"; /* erste Highlight-Grafik */

Normal2 = new Image();
Normal2.src = "button2.gif";     /* zweite Standard-Grafik */
Highlight2 = new Image();
Highlight2.src = "button2h.gif"; /* zweite Highlight-Grafik */

Normal3 = new Image();
Normal3.src = "button3.gif";     /* dritte Standard-Grafik */
Highlight3 = new Image();
Highlight3.src = "button3h.gif"; /* dritte Highlight-Grafik */

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

function Bildwechsel(Bildnr,Bildobjekt) {
 window.document.images[Bildnr].src = Bildobjekt.src;
}
//-->
</script>
<style type="text/css">
<!--
h1 { color:#6363A5; font-family:Arial,sans-serif; }
p  { color:#000000; font-family:Arial,sans-serif; }
-->
</style>
</head>
<body bgcolor="#FFFFC0" background="buttonsback.gif" text="#000000">

<table border="0" cellpadding="0" cellspacing="0"><tr>
<td valign="top">

<a href="../../../index.htm"
   onMouseOver="Bildwechsel(0,Highlight1)"
   onMouseOut="Bildwechsel(0,Normal1)"><img src="button1.gif"
   width="130" height="30" border="0" alt="Home"></a><br>
<a href="../../../helferlein/index.htm"
   onMouseOver="Bildwechsel(1,Highlight2)"
   onMouseOut="Bildwechsel(1,Normal2)"><img src="button2.gif"
   width="130" height="30" border="0" alt="Helferlein"></a><br>
<a href="../../../layouts/index.htm"
   onMouseOver="Bildwechsel(2,Highlight3)"
   onMouseOut="Bildwechsel(2,Normal3)"><img src="button3.gif"
   width="130" height="30" border="0" alt="Layouts"></a><br>

</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td valign="top">

<h1>Dynamische grafische Buttons</h1>

<p><b>Fahren Sie mit der Maus über die Buttons. Sie dürfen auch draufdrücken ;-)</b></p>

</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 = "button1.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. Im obigen Beispiel sind die entsprechenden Befehle auskommentiert, so dass Sie erkennen können, was an welcher Stelle definiert wird.

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ässt. Dazu benötigt die Funktion zwei Parameter: die wie vielte 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.

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 die Grafik, fährt) wird die im Script-Bereich definierte Funktion Bildwechsel() aufgerufen, ebenso bei onMouseOut= (wenn der Mauszeiger den verweis-sensitiven Bereich wieder verlässt).

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.


	Aufenthaltsdauer auf Web-Seite anzeigen
	Formulareingaben überprüfen

SELFHTML/Navigationshilfen

JavaScript/DOM

Anwendungsbeispiele