4 Die Navigationsseite

Auf dieser Seite gehe ich etwas anders vor, als sonst. In der Tabelle steht wieder der Quelltext. Jede Quelltextzeile hat wieder eine eigene Zelle. Die Zeilen sind nummeriert und unter der Tabelle erkläre ich das ganze. Bei öffnenden geschweiften Klammern im Script wechelt die Schriftfarbe, bei schließenden Klammern wechselt sie wieder zurück. Das erleichtert die Übersicht, welche schließende Klammer zu welcher öffnenden Klammer gehört. Wenn du die nav.htm aus Friedel_ex.zip hast, brauchst du nur die gelb hinterlegten Stellen an zu passen.

Zeile Quelltext
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 <html>
3 <head>
4 <script type="text/javascript">
5 <!--
6 var max=1000;
7 function print_explorer() {
8 var i=0;
9 while (parent.z[i].level!=-1) {
10 if (parent.z[i].level<=max) {
11 document.write("<table border=0 cellpadding=0 cellspacing=0>");
12 if (parent.z[i].level==0) {
13 exhaupt();
14 }
15 else if (parent.z[i].filename=="") {
16 document.write("<tr>");
17 exleer(i);
18 exfolder(i);
19 document.write("</tr>");
20 }
21 else {
22 document.write("<tr>");
23 exleer(i);
24 exfile(i);
25 document.write("</tr>");
26 };
27 document.write("</table>");
28 };
29 i++;
30 };
31 };
32 function exhaupt() {
33 document.write("<tr><td><a href='javascript:unopen(0)'><img src='smile.gif' border=0></a></td><td><nobr><font face='Arial' size=2>&nbsp;<a href='" + parent.z[0].filename +"' target='inhalt'>" + parent.z[0].description + "</a></font></nobr></td></tr>");
34 if (parent.z[0].opened==false){
35 max=0;
36 }
37 else {
38 max=1000;
39 };
40 };
41 function exfolder(i) {
42 var bild1="offen.gif";
43 var bild2="minus.gif";
44 if (parent.z[i].opened==false){
45 bild1="zu.gif";
46 bild2="plus.gif";
47 };
48 document.write("<td><a href='javascript:unopen(" + i + ")'><img src='" + bild2 + "' border=0></a></td><td><a href='javascript:unopen(" + i + ")'><img src='" + bild1 + "' border=0></a></td><td><a href='javascript:unopen(" + i + ")'><nobr><font face='Arial' size=2>&nbsp;" + parent.z[i].description + "</font></nobr></a></td>");
49 if (parent.z[i].opened==false) {
50 max=parent.z[i].level;
51 }
52 else {
53 max=1000;
54 };
55 };
56 function exfile(i) {
57 var bild="lineT.gif";
58 var bild3="file.gif";
59 if (parent.z[i].zubild==1) {
60 bild3="smile.gif";
61 };
62 if (parent.z[i].zubild==2) {
63 bild3="namibia.gif";
64 };
65 if (parent.z[i].level!=parent.z[i+1].level) {
66 bild="lineend.gif";
67 };
68 document.write("<td><img src='" + bild + "'></td><td><nobr><font face='Arial' size=2>&nbsp;<a href='" + parent.z[i].filename +"' target='inhalt'><img border='0' src='" + bild3 + "'>&nbsp;" + parent.z[i].description +"</a></font></nobr></td>");
69 };
70 function exleer(i) {
71 for (j=0; j<=parent.z[i].level-2; j++) {
72 paint=false;
73 k=i+1;
74 while ((parent.z[k].level>=j-2)&&(parent.z[k].level!=-1)) {
75 if (parent.z[k].level==j+1) {
76 paint=true;
77 };
78 k++;
79 };
80 if (paint==true) {
81 document.write("<td><img src='linesenk.gif'></td>");
82 }
83 else {
84 document.write("<td><img src='leer.gif'></td>");
85 };
86 };
87 };
88 function unopen(nr) {
89 parent.z[nr].opened=!parent.z[nr].opened;
90 parent.frames[0].location.href="nav.htm";
91 };
92 //-->
93 </script>
94 </head>
95 <body>
96 <script>
97 print_explorer();
98 </script>
99 </body>
100 </html>

Erklärung des Quelltextes und der nötigen und möglichen Anpassungen

In Zeile 6 wird eine Variable namens "max" definiert. Ich werde ihre Bedeutung erklären, wenn sie benutzt wird.

Die Funktion print_explorer

In den Zeilen 7 bis 31 wird die Funktion print_explorer definiert. In der (runden) Klammer nach dem Funktionsnamen stehen die Parameter der Funktion. Wie du siehst benötigt die Funktion keine Parameter. Die Klammer darf trotzdem nicht weg gelassen werden. Sie bleibt einfach leer, wenn keine Parameter benötigt werden. print_explorer übernimmt den Aufbau des Explorers. In der geschweiften Klammer steht der Quelltext der Funktion. Ich habe den Text farbig gemacht, damit du erkennen kannst welche öffnende Klammer zu welcher schließenden Klammer gehört. Das ist meistens nicht leicht zuerkennen, weil oft viele Klammern ineinander verschachtelt sind. Bei jeder { wechselt also die Farbe. Bei jeder } wechselt die Farbe wieder zurück.

In Zeile 8 wird eine Variable namens i definiert. Es ist üblich Zählervariablen i zu nennen (i wie Index). Zunächst wird ihr Wert auf 0 festgelegt.

Zeile 9 bedeutet frei übersetzt "Während parent.z[i].level ungleich -1 ist, führe aus, was in der folgenden geschweiften Klammer steht.". parent.z[i].level ist eine Variable. parent bedeutet dabei, dass sie im übergeordneten Fenster (dem Frameset) definiert wurde und der Wert von dort zu holen ist. Es handelt sich also um den Wert für level der Variablen z[0] (i=0; siehe Zeile 8) aus der Frameseite. Der Wert ist also 0. Da 0 ungleich -1 ist, wird also ausgeführt, was in der geschweiften Klammer folgt. Diese Anweisung endet mit der } in Zeile 30.

In Zeile 10 wird untersucht, ob parent.z[i].level (deren Wert ist immer noch 0) kleiner als der Wert von max ist (siehe Zeile 6). Das ist der Fall, daher wird ausgeführt, was in der Klammer folgt. Es wird also (Zeile 11) eine Tabelle geschrieben und (Zeile 12) untersucht, ob parent.z[i].level gleich 0 ist. Auch das ist der Fall, daher wird die Funktion exhaupt ausgeführt (Zeile 13 und 14). Else (Zeile 15) beschreibt, was passiert wäre, wenn die Bedingung bei if (Zeile 12) nicht erfüllt gewesen wäre. Darauf gehe ich ein, wenn es soweit ist. Die Zeilen 16 bis 26 werden also nicht ausgeführt. In Zeile 27 wird die Tabelle beendet.

In Zeile 29 wird i um 1 erhöht. Dann wird while (Zeile 9) weiter ausgeführt. Das geht so lange, bis parent.z[i].level gleich -1. Das ist auch jetzt nicht der Fall. i ist jetzt 1. parent.z[i].level ist also 1 (siehe Quelltexttabelle des Framesets Zeile 17).

Bevor ich jetzt beschreibe, was passiert, wenn die Anweisungen mit i=1 ausgeführt werden, ist es notwendig, die Funktion exhaupt zu untersuchen, denn die wurde ja aufgerufen und dort könnten Variablen verändert worden sein.

Die Funktion exhaupt

Diese Funktion wird nur für die erste Zeile des Explorers gebraucht. Zur Erinnerung: Als die Funktion aufgerufen wurde war max=1000 und i=0. Die Funktion print_explorer hatte eine Tabelle geschrieben und noch nicht beendet. Was jetzt geschrieben wird ist also in der Tabelle.

In Zeile 32 wird die Funktion definiert. Sie führt aus, was in der folgenden Klammer steht, endet also in Zeile 40.

Die Funktion schreibt also (in die Tabelle):

<tr> Das beschreibt den Anfang einer Tabellenzeile
<td> Das beschreibt den Anfang einer Tabellenzelle
<a href='javascript:unopen(0)'> Das beschreibt einen Link zur Funktion unopen mit dem Parameter 0
<img src='smile.gif' border=0> Das Bild smile.gif wird geschrieben. Wenn du ein anders Bild verwenden willst musst du das hier angeben. Welche Bilder du verwenden kannst beschreibe ich später.
</a> Hier endet der Link
</td> Hier endet die Tabellenzelle
<td> Hier beginnt eine neue Zelle (noch in der selben Tabellenzeile)
<nobr> Hier beginnt ein Bereich, in dem kein automatscher Zeilenumbruch statt findet
<font face='Arial' size=2> Hier werden Schriftart und Größe für den folgenden Eintrag festgelegt
&nbsp; Das ist ein Leerzeichen. Da Leerzeichen im Quelltext nicht berücksichtigt werden, muss ein Leerzeichen durch Unicode beschrieben werden. Wenn du meine Anleitung zu Unicode gelesen hast, weißt du, dass Unicode normalerweise durch Zahlen beschrieben wird. Da sich aber keiner die Bedeutung der 65536 Zahlen merken kann gibt es für die wichtigsten Zeichen Buchstabenkürzel. nbsp (nonbreaking space = nicht umbrechbares Leerzeichen) steht für #160. Hier könnte also auch &#160; stehen.
<a href='" + parent.z[0].filename +"' target='inhalt'> Hier beginnt wieder ein Link (a für anchor= Verankerungspunkt, href für hyper reference). Er führt zur Seite '" + parent.z[0].filename +"', also zu Beispiel1.htm. Das Ziel (target) des Links ist der Frame "inhalt".
" + parent.z[0].description + " Dies ist der Text, der den Link enthält. Also Beispiel1.
</a> Hier endet der Link
</font> Hier endet der Bereich mit der Textformatierung
</nobr> Hier endet der Bereich ohne Zeilenumbruch
</td> Hier endet die Tabellenzelle.
</tr> Hier endet die Tabellenzeile.

In Zeile 34 wird untersucht, ob parent.z[0].opened gleich false ist. Wenn das der Fall wäre, würde der Inhalt der folgenden Klammer (Zeile 35 und 36) ausgeführt werden. Da es nicht der Fall ist (else - sonst) wird ausgeführt, was in der Klammer, die in Zeile 38 anfängt, ausgeführt. max ist ab jetzt also 1000. Diese Zeile ist notwendig, auch wenn max vorher schon 1000 war. Schließlich muß diese Funktion jedes mal ausgeführt werden, wenn in den Explorer geklickt wurde und es ist nicht sicher, dass bei dieser Anwendung max auch schon vorher 1000 ist.

Wenn jemand auf das Bild smile.gif klickt wird also der Link zur Funktion unopen(0) ausgeführt.

Die Funktion unopen(nr)

Die Funktion unopen erwartet den Parameter nr (Zeile 88 bis 91). Er ist bei diesem Aufruf 0. In Zeile 89 wird die Variable parent.z[nr].opened, in diesem Fall also parent.z[0].opened invertiert. Ihr Wert war vorher true. Jetzt ist er also false. Zeile 90 sorgt dafür, dass die Explorerseite erneut aufgebaut wird. Was dann passiert beschreibe ich im Kapitel "Wenn jemand auf den Smilie klickt".

Wenn nicht auf den Smilie geklickt wurde,

geht es also mit der Funktion print_explorer weiter. Zur Erinnerung: Es wurde bisher eine Tabelle geschrieben, mit einer Zelle, in dem der Smilie inklusive Link zur Funktion unopen ist, und eine Zelle mit dem Text "Beispiel1", der den Link zu "Beisiel1.htm" enthält. max=1000 und i=1. Die Ausführung des Scripts geht, da i ungleich -1 ist mit der Klammer die in Zeile 9 beginnt weiter.

In Zeile 10 wird wieder untersucht, ob parent.z[i].level kleiner als der Wert von max ist. Da parent.z[i].level jetzt parent.z[1].level ist, hat sie jetzt den Wert 1 (siehe Quelltext der Frameseite Zeile 17). Auch das ist kleiner als max, daher wird wieder ausgeführt, was in der Klammer folgt. Es wird also (Zeile 11) eine zweite Tabelle geschrieben und wieder untersucht (Zeile 12), ob parent.z[i].level gleich 0 ist. Das ist diesmal nicht der Fall. Daher wird ausgeführt, was in Zeile 15 steht.

Es wird also untersucht, ob parent.z[i].filename gleich "" ist. Auch das ist nicht der Fall. Die Zeilen 16 bis 20 werden also nicht ausgeführt und es geht weiter mit Zeile 21. Es wird eine Tabellenzeile angefangen und dann die Funktionen exleer mit dem Parameter i, und dann die Funktion exfile mit dem Parameter i aufgerufen. Dann wird die Tabellenzeile beendet. In Zeile 27 wird die Tabelle beendet und in Zeile 29 wird i wieder um 1 erhöht.

Die Funktion exleer(i)

Zur Erinnerung: Es wurde bisher eine Tabelle geschrieben mit einer Zelle in dem der Smilie inklusive Link zur Funktion unopen ist und eine Zelle mit dem Text "Beispiel1", der den Link zu "Beisiel1.htm" enthält. Außerdem wurde eine zweite Tabelle angefangen, darin wurde eine Tabellenzeile angefangen. Was jetzt geschrieben wird ist also in dieser Tabellenzeile. max=1000 und i=1. Die anderen Variablen sind, da nicht auf den Smilie geklickt wurde, noch so, wie sie im Frameset festgelegt wurden.

In Zeile 71 wird eine neue Zählvariable j eingeführt. (j=0; j<=parent.z[i].level-2; j++) bedeutet, dass sie zunächst den Wert 0 hat, dann wird festgestellt, ob sie kleiner oder gleich parent.z[i].level-2 ist. Wenn das der Fall ist, wird sie um 1 erhöht und ausgeführt, was in der Klammer folgt. i=1. Daher ist parent.z[i].level auch 1. parent.z[i].level-2 ist also -1. j ist also nicht kleiner oder gleich parent.z[i].level-2. Die Klammer wird nicht ausgeführt und es geht weiter mit der Funktion exfile.

Die Funktion exfile(i)

Die Variable bild wird festgelegt (Zeile 57). Es handelt sich um . Danach wird die Variable bild3 definiert (Zeile 57). Das ist das Standardbild für eine Seite. Im Beispiel also . Es wird immer verwendet, wenn im Quelltext des Framesets der Wert für zubild=0 und wenn es sich nicht um einen Ordner handelt.

Wenn du für alle Seiten das Standardbild verwenden willst, kannst du die Zeilen 59 bis 61 und 62 bis 64 löschen. Für jedes andere Bild, das du für eine Seite verwenden willst, musst du so einen Block aus 3 Zeilen machen, wie es in Zeile 59 bis 61 für die Seite mit dem Smilie und in Zeile 62 bis 64 für die Seite mit der Flagge von Namibia gemacht wurde.

In Zeile 59 wird festgestellt, ob der Wert für parent.z[i].zubild=1. Da i=1 ist diese Bedingung erfüllt. Daher wird (Zeile 60) der Wert für bild3 auf smilie.gif festgelegt. In Zeile 62 wird geprüft, ob parent.z[i].zubild=2. Das ist nicht der Fall und es geht also in Zeile 65 weiter.

Es wird untersucht, ob parent.z[i].level einen anderen Wert als parent.z[i+1].level hat. Da das nicht der Fall ist geht es in Zeile 68 weiter. Es wird also geschrieben:

<td><img src='" + bild + "'> Eine Tabellenzelle fängt an und das Bild wird geschrieben.
</td><td> Die Tabellenzelle endet und es fängt eine neue an.
<nobr><font face='Arial' size=2>&nbsp; Es folgt ein Bereich ohne Zeilenumbruch, die Schriftart wird auf Arial und die Schriftgröße auf 2 festgelegt. Dann folgt ein Leerzeichen.
<a href='" + parent.z[i].filename +"' target='inhalt'><img border='0' src='" + bild3 + "'>&nbsp;" + parent.z[i].description +" Bild "bild3" wird geschrieben. In diesem Fall also . Dann folgt ein Leerzeichen und der Text Beispiel2. Das ganze enthält einen Link zu Beispiel2.htm, der im Frame "inhalt" ausgeführt werden kann.
</a></font></nobr></td> Der Link, der Bereich der Textformatierung, der Bereich ohne Zeilenumbruch und die Tabellenzelle enden hier.

Es geht weiter in der Funktion print_explorer

Zur Erinnerung: Es wurden bisher 2 Tabellen mit je einer Zeile geschrieben.

Beispiel1

 und 

 Beispiel2

Natürlich wurden die Tabellen ohne Rahmen geschrieben. max=1000, i=2, bild=lineT.gif und bild3=smilie.gif.

Da parent.z[i].level (Zeile 9) jetzt wieder 1 ist (siehe Quelltext des Framesets Zeile 18) und damit ungleich -1, wird der Quelltext in Zeile 10 bis 30 erneut ausgeführt.

Alles ist wie in bei i=1 bis in Zeile 15 untersucht wird, ob parent.z[i].filename gleich "" ist. Das ist dieses mal der Fall weil in dieser Zeile ein Ordner abgebildet werden soll. Daher werden die Zeilen 16 bis 20 dieses mal ausgeführt. In Zeile 11 wurde schon eine Tabelle angefangen. Jetzt wird (Zeile 16) eine Tabellenzeile angefangen. Dann wird die Funktion exleer wieder ausgeführt (Zeile 17). Auch dieses mal passiert in der Funktion nichts und es wird die Funktion exfolder ausgeführt (Zeile 18). Danach wird die Tabellenzeile beendet (Zeile 19) und in Zeile 27 wird die Tabelle beendet. In Zeile 29 wird i wieder um 1 erhöht und es geht wieder bei Zeile 9 weiter.

Zunächst betrachten wir aber, was in der Funktion exfolder passiert ist.

Die Funktion exfolder(i)

In Zeile 42 wird die Variable bild1 definiert. Sie hat den Wert offen.gif. Sie legt fest, welches das Standardsymbol für einen geöffneten Ordner ist. Wenn du ein Bild mit einem anderen Namen oder Pfad verwenden willst, musst du diesen Wert entsprechend anpassen. Dann wird in Zeile 43 die Variable bild2 definiert.

In Zeile 44 wird untersucht, ob parent.z[i].opened gleich false ist. Da i=2 ist, ist parent.z[i].opened=false (siehe Quelltext des Framesets Zeile 18). bild1 wird also durch zu.gif ersetzt (Zeile 45) und bild2 wird durch plus.gif ersetzt (Zeile 46).

Laut Zeile 48 wird geschrieben:

<td> Eine Tabellenzelle fängt an.
<a href='javascript:unopen(" + i + ")'><img src='" + bild2 + "' border=0></a> Das Bild wird ohne Rahmen geschrieben. Es enthält einen Link zur Funktion unopen.
</td><td> Die Tabellenzelle endet und es fängt eine neue an.
<a href='javascript:unopen(" + i + ")'><img src='" + bild1 + "' border=0></a> Das Bild für den geöffneten Ordner wird geschrieben. Es enthält auch einen Link zur Funktion unopen.
</td><td> Die Tabellenzelle endet und es fängt eine neue an.
<a href='javascript:unopen(" + i + ")'><nobr><font face='Arial' size=2>&nbsp;" + parent.z[i].description + "</font></nobr></a> Der Text Ordner1 wird ohne Zeilenumbruch in der Schriftart Arial, Schriftgröße 2 geschrieben. Auch er enthält einen Link zur Funktion unopen.
</td> Ende der Tabellenzelle.

In Zeile 49 wird noch mal untersucht, ob parent.z[i].opened gleich false ist. Da das der Fall ist, wird festgelegt, dass max=parent.z[i].level (Zeile 50). max ist also 1 (siehe Quelltext der Frameseite Zeile 18).

Wenn auf bild2, auf bild1 oder auf parent.z[i].description geklickt wird, wird die Funktion unopen ausgeführt. Sie wurde schon besprochen.

Auf diese Weise wird also zu den oben abgebildeten beiden Tabellen eine dritte geschrieben, die so aussieht:

 Ordner1

Das Bild plus.gif, das Bild zu.gif und der Text enthalten jeweils einen Link zur Funktion unopen.

Weiter in der Funktion print_explorer mit i=3

Da (Zeile 9) parent.z[3].level auch ungleich -1 ist, wird alles noch mal ausgeführt.

In Zeile 10 wird geprüft, ob parent.z[3].level kleiner oder gleich max ist. parent.z[3].level ist 2. max ist 1. Die Bedingung ist also nicht erfüllt und es geht weiter mit Zeile 29. Dort wird i wieder um 1 erhöht und es geht mit i=4 bei Zeile 9 weiter. Da der Ordner bei i=2 geschlossen war, wird also die folgende Zeile nicht dargestellt.

Bei i=4 passiert genau das selbe. Es wird nichts geschrieben und i wird auf 5 erhöht.

Weiter in der Funktion print_explorer mit i=5

Die Bedingung in Zeile 8 ist immer noch erfüllt. parent.z[5].level ist 1. Da max auch 1 ist, ist die Bedingung in Zeile 10 erfüllt. Es geht also in Zeile 11 weiter.

Es passiert das selbe wie bei i=2, nur dass in der Funktion exfolder diesmal die Zeilen 45 bis 47 nicht ausgeführt werden weil parent.z[i].opened diesmal true ist. Daher sieht die Tabelle diesmal so aus:

 Ordner2

print_explorer mit i=6

Es wurde alles schon besprochen, bis auf die Funktion exleer. Da ist bisher nie etwas passiert. Das ist diesmal anders.

Nachdem die Funktion print_explorer die Tabelle geöffnet hat wird exleer aufgerufen. Sie führt den Quelltext von Zeile 71 bis 87 aus.

Zunächst wird in Zeile 71 ein Zähler j definiert. Er zählt von 0 aufwärts in 1-er Schritten, solange j<=parent.z[i].level-2. Wenn die Bedingung nicht mehr erfüllt ist, ist auch die Funktion beendet. Zunächst gilt also j=0. parent.z[6].level ist 2. parent.z[i].level-2 ist also 0. j ist also kleiner oder gleich parent.z[i].level-2. Die Zeilen 72 bis 87 werden also ausgeführt.

In Zeile 72 wird die Variable paint eingeführt. Sie erhält den Wert false.

In Zeile 73 wird die Variable k eingeführt. Sie bekommt den Wert i+1. Also 7.

In Zeile 74 beginnt eine Schleife, die ausgeührt wird solange (parent.z[k].level>=j-2) und (parent.z[k].level!=-1). Es müssen also beide Bedingungen erfüllt sein. parent.z[7].level ist 2. j-2 ist -2. Die Bedingungen sind also erfüllt und Zeile 75 bis 85 werden ausgeführt.

In Zeile 75 wird festgestellt, ob parent.z[k].level gleich j+1 ist. parent.z[k].level = 2. j+1 = 1. Die Bedingung ist nicht erfüllt, daher geht es in Zeile 80 weiter (else - engl. sonst). Es wird geprüft, ob paint = true. paint wurde in Zeile 72 auf false gesetzt. Es geht also in Zeile 83 weiter. Es wird also (Zeile 84) eine Tabellenzelle,die das Bild leer.gif enthält, geschrieben. Das Bild leer.gif ist einfach ein Platzhalter. Es ist 16x16 Pixel groß und hat die Farbe "Transparent", es ist also nicht sichtbar.

Damit ist die Zählschleife für j zum ersten mal durchlaufen und sie wird für das nächste j wiederholt. In Zeile 71 wird also die Bedingung j<=parent.z[i].level-2 für j=1 geprüft. parent.z[i].level ist immer noch 2 (Quelltext der Frameseite Zeile 22). parent.z[i].level-2 ist also nach wie vor 0. 0 ist nicht kleiner oder gleich j. Die Funktion ist also beendet.

Danach wird die Funktion print_explorer wie bei i=1 fortgesetzt, nur statt dem Smilie wird diesmal das Bild file.gif verwendet, weil die Bedingungen in Zeile 59 und 62 diesmal nicht erfüllt sind. Die Tabelle sieht also diesmal so aus:

Beispiel 5

print_explorer mit i=7 bis i=13

Solange parent.z[i].level!=-1 erfüllt ist wird die Schleife in Zeile 8 immer wieder durchlaufen und entsprechend jedesmal eine Tabelle geschrieben oder eben nicht. Dadurch entstehen (ohne Rahmen und Abstände) die Tabellen.

 Beispiel1
  Beispiel2
 Ordner1
  Beispiel3
  Beispiel4
 Ordner2
  Beispiel5
 Ordner3
 Ordner4
  Beispiel6
  Beispiel7
 Ordner5

print_explorer mit i=14

Dieses mal ist ist die Bedingung für die while-Schleife in Zeile 9 nicht erfüllt, weil parent.z[i].level = -1. Die Schleife ist also beendet und es geht in Zeile 31 weiter, wo auch die Funktion endet. Damit ist der Explorer eigentlich fertig. Was passiert aber, wenn jemand auf den Smilie in der ersten Zeile oder auf einen Ordner klickt?

Wenn auf den Smilie in der ersten Zeile oder auf einen Ordner geklickt wurde

Im Smilie und in jedem Ordnerbild ist der Link <a href='javascript:unopen(" + i + ")'> enthalten. Er ruft die Funktion unopen mit dem Parameter i auf.

Die Funktion unopen (Zeile 88 - 91)

Diese Funktion führt den Code in Zeile 89 und 90 aus.

In Zeile 89 Wird der Wert für parent.z[nr].opened invertiert. Die Variable opened erhält also für die jeweilige Zeile den Wert false, wenn sie bisher den Wert true hatte, und sie erhält den Wert true, wenn sie bisher false war.

In Zeile 90 wird die Seite nav.htm erneut aufgerufen. Dadurch wird der Explorer mit dem geänderten Wert neu aufgebaut. Der Ordner, der angeklickt wurde ist danach also offen, wenn er vorher zu war und umgekehrt.

Wenn du verschiedene Bilder für Ordner verwenden willst, musst du noch die Anpassungen vornehmen, die ich auf der Seite Verschiedene Ordnerbilder erkläre. Wenn nicht, kannst du gleich auf der Seite Mögliche Bilder weitermachen.

Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: