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='&nbsp;&nbsp;&nbsp;'; 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='&nbsp;&nbsp;&nbsp;';
				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.



Spenden mit Paypal