 aktiven Button gedrückt lassen
In einem Navigationsmenü soll nach dem Klicken eines grafischen Buttons der gedrückte Button signalisieren, welche Wahl zuletzt getroffen wurde. Dem Besucher wird durch die Darstellung des aktiven Buttons angezeigt, welche Seite er zuletzt aufgerufen hatte.
|
|
aktiver Link - Grafik-Button
Es werden jeweils 2 Grafiken benötigt (gedrückt und nicht gedrückt)
 Ich muss zugeben, dass ich an diesem Script vor einigen Jahren lange herumgeknobelt habe. Die Lösung war, beim Klicken nicht nur die Grafik zu tauschen sondern zusätzlich die Informationen der Bildobjekte in Variablen abzulegen, um später darauf zurückgreifen zu können.
Vorbereitungen im JavaScript
Erst mal habe ich für jeden der später verwendeten Buttons eine Variable deklariert und die Datenquelle (URL) zugeordnet.
var button1normal = "b1.gif"
var button1aktiv = "b1h.gif"
var button2normal = "b2.gif"
var button2aktiv = "b2h.gif"
var button3normal = "b3.gif"
var button3aktiv = "b3h.gif"
var button4normal = "b4.gif"
var button4aktiv = "b4h.gif"
Dann habe ich zwei weitere Variablen definiert, die später zur Zwischenspeicherung dienen sollen:
1) tempbutton
beinhaltet später, welcher Button zuletzt gedrückt wurde (Name).
2) tempimage
beinhaltet später die URL (Adresse) des zuletzt geklickten Images (vorher).
Die URL wird benötigt um beim nächsten Klicken den vorher hervorgehobenen Button wieder zurück (auf Normalansicht) zu tauschen. Dort steht also die Adresse für das Image, das zurück getauscht werden muss. Zu Anfang ist hier eine beliebige Adresse abgelegt.
var tempbutton = button1aktiv;
var tempimage = button1normal;
Was geschieht beim Anklicken
Die Anweisung lautet:
Tausche beim Anklicken die angezeigete Grafik. Merke dir den vorherigen Staus: Welche Grafik wurde getauscht und wo findest du diese Grafik (URL), damit du später den alten Zustand wieder herstellen kannst.
Und so wird das gelöst:
Für jeden Button wird ein Name vergeben: name="bx" (b1, b2, b3, b4), dieser Name ermöglicht später eine Anweisung die sagt: "tausche das Objekt mit dem Namen 'bx'. Zeige nun einen der Buttons, die ich oben im Head bekannt gemacht hatte"
1. aus der Variablen 'tempimage' die Information entnehmen und (falls das nicht der erste angeklickte Button war) dem vorher gedrückten Button wieder seine alte Grafik zuweisen.
2. die (vorher-)Informationen für den neu geklickten Button speichern.
3. anschließend die Anzeige für den gerade geklickten Button aktualisieren (Bild tauschen)
Beispiel für Button 4
(Klicken sie den Button an)
Script-Code
Code im Head der HTML-Datei
<script type="text/javascript" language="JavaScript">
<!--
var button1normal = "b1.gif"
var button1aktiv = "b1h.gif"
var button2normal = "b2.gif"
var button2aktiv = "b2h.gif"
var button3normal = "b3.gif"
var button3aktiv = "b3h.gif"
var button4normal = "b4.gif"
var button4aktiv = "b4h.gif"
var tempbutton = button1normal;
var tempimage = button1aktiv;
//-->
</script>
Code im Body der HTML-Datei (Zeilenumbrüche entfernen)
<a href="#" onClick="tempbutton.src=tempimage;
tempbutton=nummer4;
tempimage=button4normal;
nummer4.src=button4aktiv;">
<img name="nummer4" src="b4.gif" width="150" height="24" border="0" alt="">
</a>
|
Home • JavaScript • aktiver Button
BEISPIEL
DOWNLOAD