Zurück-Button

Angenommen, Sie haben eine Seite erstellt, die von verschiedenen Punkten aufgerufen werden kann, z.B. von einer Inhalts- und einer speziellen Themenseite. Und jetzt möchten Sie dem User auf der aufgerufenen Seite einen Link zurück zur aufrufenden Seite anbieten. Dann stehen Sie vor folgenden Problemen.

  1. Sie könnten zwei Links zur Verfügung stellen, einen zurück zur Inhaltsseite und einen zurück zur Themenseite. Das möchten Sie nicht, da zwei Links den User verwirren könnten.
  2. Daher überlegen Sie, praktisch zwei identische HTML-Dateien zu erstellen. Der einzige Unterschied wäre, daß in der einen ein Link zurück zur Inhaltsseite und in der anderen ein Link zurück zur Themenseite eingebaut wäre. Der Nachteil dieser Lösung liegt auf der Hand. Vom erhöhten Speicherbedarf mal abgesehen, wäre bei Änderungen am Inhalt einer Datei auch die zweite entsprechend zu aktualisieren.
  3. Eine dritte Möglichkeit wäre, gar keinen Zurück-Link anzubieten und stattdessen den User darauf hinzuweisen, den Zurück-Button des Browsers zu benutzen.

Exakt die letzte Möglichkeit ist auch mit einer JavaScript-Funktion zu realisieren, undzwar innerhalb der aufgerufenen Seite. Egal von welcher Seite man kommt, man würde immer auf die zuvor angesehene Seite zurückgelangen.

Ich habe verschiedene Codes gefunden, die ich Ihnen im Detail vorstellen möchte und die Sie auch gleich an Ort und Stelle testen dürfen.


<INPUT TYPE=BUTTON VALUE=“Zurück“ onClick=“history.back()“>

Dieser Code sollte auch von älteren Browsern „verstanden“ werden und benutzt keine Grafik. Der Text der Schaltfläche wird im Attribut VALUE zugewiesen.


<BUTTON TYPE=BUTTON onClick=“history.back()“>

<FONT COLOR=Fuchsia><B><U>Zurück</U></B></FONT>

</BUTTON>

Dieser Code ähnelt dem vorangegangen Beispiel, benutzt allerdings den HTML-Befehl BUTTON. Der Text der Schaltfläche wird einfach zwischen die BUTTON-Anweisungen eingefügt. In diesem Fall habe ich allerdings noch zusätzlich die Schriftfarbe auf „Fuchsia“ (entspricht dem RGB-Wert FF00FF) eingestellt und den Text fett und unterstrichen formatiert. Bitte beachten Sie, daß der BUTTON-Befehl nicht allen Browsern zur Verfügung steht. Es funktioniert auf jeden Fall mit IE 4, Netscape 6.2 und Opera 5.11 (alle getestet). Die Schaltfläche selbst sieht allerdings unterschiedlich aus.


<BUTTON TYPE=BUTTON onClick=“history.back()“>

<IMG SRC=“grafik.gif“ BORDER=0 WIDTH=50 HEIGHT=50>

</BUTTON>

In diesem Beispiel wird auf eine Grafik zurückgegriffen. Bitte beachten Sie, daß der HTML-Befehl BUTTON nicht allen Browsern zur Verfügung steht. Es funktioniert auf jeden Fall mit IE 4, Netscape 6.2 und Opera 5.11 (alle getestet). Die Schaltfläche selbst sieht allerdings unterschiedlich aus.


Zurück

<A HREF=“javascript:history.back()“ onMouseOver=“{window.status=’Zurück‘; return true;}“>

<IMG SRC=“grafik.gif“ WIDTH=50 HEIGHT=50 ALT=“Zurück“ BORDER=0>

</A>

Auch bei diesem Code wird eine Grafik benutzt. Da in diesem Beispiel auf den normalen Linkbefehl A HREF= zurückgegriffen wird, erscheint hier auch das Händchen, das einen Verweis anzeigt. Für den Internet Explorer kann auch ein ALT-Attribut angegeben werden.


Zurück

<A HREF=“javascript:history.back()“ onMouseOver=“{window.status=’Zurück‘; return true;}“>

Zurück

</A>

Dieser Code ähnelt dem normalen Link in einem Text, ist allerdings zusätzlich mit der JavaScript-Funktion ausgestattet. Der Textstring hinter window.status wird in der Statuszeile des Browsers angezeigt. Bitte beachten Sie die beiden geschweiften Klammern { und } in der zweiten Hälfte des Codes.


Übrigens: Im Unterschied zum A HREF-Link, der ja normalerweise eine HTML-Datei aufruft und dann immer den Anfang der Seite zeigt, wird mit den Funktionen, die auf dieser Seite beschrieben werden, an die zuletzt eingesehene Stelle des Dokuments gesprungen. Wenn Sie z.B. weiter heruntergescrollt haben, wird an den entsprechenden Fensterinhalt zurückgesprungen.

Wenn die Codes bei Ihnen nicht funktionieren, haben Sie entweder keinen JavaScript-fähigen Browser oder die Funktion ist nicht aktiviert.