Hauptmenü

Untermenü

JavaScript - Praxistutorial 1 - Die Navigation

1. Die Abschnitte

2. Die Vorschaubilder einbinden

Nun, man könnte die jetzt alle statisch in die scroller.htm reinschreiben. Stück für Stück, jedes einzelne und das 16 mal. Aber das geht wesentlich bequemer mit JavaScript. Denn damit kann man auch ganz bequem die HTML-Tags in das jeweilige Dokument hinein schreiben. Und das müssen wir in unserem Fall den folgenden Code innerhalb des <div id="navi"> packen.


<script type="text/javascript">
for (0pic_numi++)
{
  document.write ('<a href="#" onclick="showDetails(' ');">');
  document.write ('<img src="pics/low/' '.jpg" />');
  document.write ('</a>');
}
</script>


Erläuterung

Also, wir kennen die Anzahl der vorhandenen Bilder durch die Variable pic_num. Und zwar weil wir die code.js im <head>-Bereich der HTML-Datei eingebunden haben. Darum bauen wir eine ganz normale for-Schleife und erzeugen mittels document.write stinknormalen HTML-Code. Wichtig ist eigentlich nur das Konstrukt + i +, da es sich dabei um eine JavaScript-Variable handelt. Also arbeiten wir mit einer so genannten Zeichenkettenverknüpfung. Und die darf man nicht in eine normale Zeichenkette à la document.write ('<img src="pics/low/i.jpg" />'); packen, da sie sonst nicht interpretiert wird. Ach ja, der Event-Handler onclick = "showDetails(...)" ruft eine Funktion auf, um die wir uns später noch kümmern werden.

Ein Hinweis

In der Schleife habe ich der Variable i kein var vorangestellt, da wir das hier nicht benötigen. Aber! Das kann leicht tödlich enden. Also gewöhnt euch das bitte nicht an. Ich gehe hier einfach mal mit schlechtem Beispiel voran. Vielleicht, weil ich in Köln wohne und die dortige Mentalität ein wenig auf mich abfärbt. Im nächsten Tutorial mache ich es besser. Versprochen.

Noch ein Hinweis

Mit document.write sollte man eigentlich nicht mehr arbeiten, da man das heutzutage viel sauberer über die so genannte DOM-Manipulation erledigen kann. Allerdings setzt das schon etliche Kenntnisse voraus, darum lass ich es hier bleiben.

3. Die Event-Handler setzen

... legen wir mal auf die "Doppelpfeile". Dazu benötigen wir für jede Richtung zwei Funktionen, eine zum Starten und eine zum Beenden. Noch ein wichtiger Hinweis. Nennt die Funktion zum nach links scrollen bitte niemals scrollLeft. Denn dabei handelt es sich um eine Microsoft-spezifische Eigenschaft. Und dann haut's euch eine Fehlermeldung um die Ohren. Wohlan, ergänzt also die beiden Links um folgenden Code.


<class="links">
  <a href="#" 
    onmouseover="moveLeft();" 
    onmouseout="stopLeft();">&lt;&lt;
  </a>
</p>
...
<class="rechts">
  <a href="#" 
    onmouseover="moveRight();" 
    onmouseout="stopRight();">&gt;&gt;
  </a>
</p>

Erläuterung

Auf jedem Link liegen nun zwei Event-Handler. Der erste ruft eine Funktion auf, die den Scrollvorgang startet (grausiges Beamtendeutsch) und der zweite eine, die ihn beendet. Später kommen noch mal zwei dazu, daher habe ich der Übersichtlichkeit halber den Code schon entsprechend eingerückt.

4. <div id="navi" style="left: 0px;">

Warum wurde das direkt in der scroller.htm festgelegt? Hätte man das nicht direkt in der styles.css definieren können? Nun, hätte man schon können, aber dann bekäme man mit JavaScript per style keinen direkten Zugriff mehr auf den ursprünglich festgelegten Wert. Es gibt zwar die Möglichkeit, CSS-Anweisungen in externen Dateien auszulesen, aber das ist für den Anfang zu kompliziert und außerdem habe ich mich damit noch nie richtig beschäftigt. Steht aber schon in meiner internen Todo-Liste.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt