Dynamische Erstellung eines Inhaltsverzeichnisses mit JavaScript für die aktuelle Seite
Grundgedanken
Als Webmaster ist man immer bemüht den Besuchern seiner Seite den optimalen Komfort zu liefern.
Daraus entstand die Idee ein Java-Script zur Erstellung eines dynamischen Inhaltsverzeichnisses auf der aktuellen Seite zu schreiben.
Mit diesem Script kann man sich als Webmaster eine Menge Schreibarbeit bei der Erstellung der Seite sparen.
Zur Laufzeit werden an allen ausgewählten Überschriften automatisch Anker für die Sprungmarken erzeugt.
Webmaster Information
Jeder Webmaster kann dieses kostenlose Tool auch auf seiner Webseite einbinden.
Funtionsweise
Einlesen der Überschriften <h*></h*>
Nach dem Laden der aktuellen Seite werden alle enthaltenen Überschriften gescannt.
Wenn sich die gefundenen Überschriften im definierten Bereich befinden werden diese in ein Inhaltsverzeichnis der aktuellen Seite geschrieben.
Übergabe der Parameter und Aufruf des Scriptes
Definition des Ziels für das Inhaltsverzeichnis
Fügen sie dazu einfach auf ihrer Seite an der Stelle wo nachher das Inhaltsverzeichnis der Seite erscheinen soll den Code
<div id="site_navigator"></div>
ein.
Scriptbereich einfügen
Kopieren sie den Scriptbereich ans Ende der HTML-Datei direkt vor den
</body>
-Tag.
Parameter anpassen
Über einige Parameter kann die Darstellung des Inhaltsverzeichnisses dem Erscheinungsbild der Webseite angepasst werden.
Änderungen dürfen ausschließlich im Bereich Anzupassende Parameter vorgenommen werden:
var Variable='
Anzupassende Parameter
';
Die folgenden Parameter sind definiert...
Border
Durch die Anpassung der
var Border='2px groove silver';
Variable kann die Anzeige des Rahmens den individuellen Bedürfnissen angepasst werden.
ColorBG
Die Variable
var ColorBG='#EEE';
definiert die Hintergrundfarbe des Inhaltsverzeichnisses.
KatStart
Durch die Anpassung der Variable
var KatStart=1;
kann festgelegt werden ab welcher Wertigkeit die Überschriften im Inhaltsverzeichnis erscheinen.
KatEnde
Mit der Variable
var KatEnde=6;
können sie die unwichtigeren Überschriften bei der Erzeugung des Inhaltsverzeichnisses ausschließen.
SymbSpace
Mit Hilfe der Variable
var SymbSpace=' ';
werden benutzerspezifische Füllzeichen bei den untergeordneten Überschriften vorangestellt.
SymbStart
Außerdem kann mit der Variable
var SymbStart='>';
ein Startzeichen definiert werden.
TextColor
Die Farbe zur Darstellung des Textes wird durch
var TextColor='silver';
definiert.
Beispiel zum korrekten Einfügen des Codes in ihre Seite
<html>
<body>
...
Seiten-Inhalt
...
<div id="site_navigator"></div>
...
Seiten-Inhalt
...
<!-- Scriptbereich //-->
<script type="text/javascript">
<!--
var Border='2px groove silver';
var ColorBG='#EEE';
var KatStart=1;
var KatEnde=6;
var SymbSpace=' ';
var SymbStart='>';
var TextColor='silver';
//-->
</script>
<script src="http://www.steffen-hanske.de/js/sitenavigator.js"></script>
</body>
</html>
Überschrift - <h1></h1>
Überschrift - <h2></h2>
Überschrift - <h3></h3>
Überschrift - <h4></h4>
Überschrift - <h5></h5>
Überschrift - <h6></h6>
Freeware - Donationware
Danke das Sie meine Software verwenden.
Wenn das Programm ihre Erwartungen erfüllt und sie es regelmäßig im Einsatz haben,
bitte ich um eine Spende für die Kompensierung der durch Weiterentwicklung oder Verbreitung der Software entstehenden Kosten und den weiteren Ausbau meines Internetangebotes.
Verwenden Sie dazu den folgenden Butten und senden sie mir einfach und sicher per PayPal ihre Spende.