 12 Navigation für durchnumerierte HTML-Seiten
Navigationsschema für eine Reihe numerisch fortlaufend bezeichneter HTML-Seiten. Geeignet für einen Text- oder Bildbericht, durch den sie duch vor- + zurückblättern navigieren möchten.
Das Script findet die vorhergehende und die nächste Seite in einer regelmässig numerierten Serie von HTML-Dateien, die im gleichen Verzeichnis liegen. Sehr gut geeignet für Bildergalerien und Abhandlungen mit fortlaufenden Seiten.
Die Verweise für "voherige" und "nächste" werden mit der JavaScript-Funktion belegt. Unabhängig davon, ob sie Text- oder Grafik-Links verwenden, wird im Attribut für die Referenz der Aufruf der Funktion für die Zurück- oder Vorblättern-Funktion eingesetzt.
<a href="javascript:previousFile()"> Button </a>
<a href="javascript:nextFile()"> Button </a>
Voraussetzungen
 der erste Teil der Dateinamens ist gleich
die letzten beiden Zeichen des Dateinamens sind Zahlen von 00 - 99
Beispiele: name34.htm name35.htm name36.htm
Kopieren sie bei der Erstellung ihrer Seiten die Inhalte in ihre Musterdatei, die sie unter jeweils anderen Dateinamen abspeichern. Wenn sie dabei die Seiten z.B. mit 'seite01.htm', seite02.htm', seite03.htm, ... usw. bezeichnen, schaffen sie die Voraussetzung zur Verwendung dieses Script-Beispiels.
Ala Navigation eignen sich solche Buttons (siehe Mini-Image-Box)
    
Vorteile
Die Navigation (z.B. den Block der Buttons) kann als Modul in jede Seite einkopiert werden. Dateinamen für die Links müssen nicht von Hand eingetragen werden. Im Head-Bereich der Seiten verweisen sie auf die externe JavaScript-Datei (siehe Beispiel / Download).
Das gleiche Script kann ohne weiteres für mehrere Fotoshows verwendet werden, die sogar im gleichen Verzeichnis abgelegt sind. Dabei muss lediglich der führende Teil des Dateinamens anders sein.
Bidergalerie 1: show1-34.htm show1-35.htm show1-36.htm
Bidergalerie 2: show2-12.htm show2-13.htm show2-14.htm
Eine der Funktionen legt den Link zur vorherigen Seite fest, die andere den zur nächsten.
previousFile() nextFile()
Der Aufruf der Funktionen stellt den Link zur vorherigen bzw. nächsten Seite her. Statt eines Dateinamens im Attribut 'href', wird der Funktionsaufruf eingetragen: javascript:previousFile() oder javascript:nextFile() .
<a href="javascript:previousFile()"> Verweisbereich </a>
In den Musterdateien meines Downloads können sie das in den Beispielseiten analysieren.
Konditionen für die Dateinamen:
Den Dateinamen für die HTML-Dokumente notieren sie beim Abspeichern, indem der erste aus einem String (Text) und letzte Teil aus zwei (fortlaufenden) Zahlen der Dateinummer kombiniert wird:
- seite01.htm
- seite02.htm
- seite03.htm
- ...
- seite99.htm
|
- irgendwas01.htm
- irgendwas02.htm
- irgendwas03.htm
- ...
- irgendwas99.htm
|
Dabei ist völlig gleichgültig was sie als ersten Teil (String) einsetzen oder welchen Suffix sie wählen (htm od. html). Das JavaScript 'kümmert sich eh nur um die beiden letzten Stellen vor dem Punkt. Der Punkt ist bekannterweise der Trenner zwischen Dateiname und dem Suffix (htm oder html).
dateiname34.htm filename34.html
Tipp
Unlogische Links werden auf den zutreffenden Seiten deaktiviert
Auf der ersten Seite macht ein Zurück-Link oder Anfang-Link keinen Sinn.
Auf der letzten Seite deaktivieren sie den Verweis zur nächsten und letzten Seite.
Funktion des Scripts
(Nur für den, den es interssiert)
Das Script ermittelt den Dateinamen der aktuell angezeigten HTML-Datei und setzt aus diesen Informationen die URL der nächsten und vorherigen Datei zusammen, die sich ja nur durch die Endnummer unterscheiden. Für die URL der nächsten Datei muss eine 1 addiert, für die URL der vorherigen Datei eine 1 subtrahiert werden.
Damit sie sich vorstellen können wie das in der Paxis aussieht, sehen sie zur Demo hier einmal die Werte für genau diese Seite. Die Ergebnisse der einzelnen Programmschritte kann man so leichter erkennen:
Das Script liest die URL des Dokuments:
URL der Datei:
Das Script ermittelt die Position des ersten Zeichen des Dateinamens ():
Position Start des Dateinamens:
Das Script ermittelt die Position des Punkts:
Position des Punkts:
Das Script ermittelt die Position des letzten Zeichens:
Position letztes Zeichens:
Das Script ermittelt den Suffix (Dateiendung) der Datei:
FileSuffix:
Das Script ermittelt die beiden Ziffern am Ende des Dateinamens:
Ziffern im Dateinamen:
Aus diesen Infos ermittelt das Script den gesamten Dateinamen:
Name der Datei:
Daraus werden die Namen der vorherigen und nächsten Datei ermittelt, die beim Anklicken der Buttons oder Links aufgerufen werden sollen.
Der Name der vorherigen Datei wird ermittelt:
Der Name der vorherigenen Datei wird in eine Variable geschrieben:
Der Aufruf der vorherigenen Datei kann nun ausgelöst werden mit:
location.href = previousFileName
Der Name der nächsten Datei wird ermittelt:
Der Name der nächsten Datei wird in eine Variable geschrieben:
Der Aufruf der nächsten Datei kann nun ausgelöst werden mit:
location.href = nextFileName
|
HOME
DOWNLOAD 
BEISPIEL 
ZURÜCK