Beispiel1

  Beispiel2

 Ordner1

  Beispiel3

  Beispiel4

 Ordner2

  Beispiel5

 Ordner3

 Ordner4

  Beispiel6

  Beispiel7

 Ordner5

5 Verschiedene Ordnerbilder

Ich habe für die Files bzw. Seiten 3 verschiedene Bilder verwendet. , und . war das Standardbild.

Bei den Ordnern ist entsprechendes auch möglich. Im bisherigen Beispiel wird nur das Standardbild für den offenen Ordner (offen.gif) und das Standardbild für den geschlossenen Ordner (zu.gif) verwendet. Du kannst aber auch verschiedene Bilder für deine Ordner verwenden (Wenn du einfach nur andere Bilder als die vorgegebenen Standardbilder verwenden willst, mußt du im nächsten Kapitel weiter lesen).

Im Beispiel links zeige ich dir einen Explorer, der für den Ordner 4 und Ordner 5 ein anderes Bild verwendet. Standardbild ist immer noch das Buch. Hier folgt die Beschreibung, wie du so etwas machen kannst. Alle notwendigen Änderungen müssen im Quelltext der nav.htm gemacht werden, und dort braucht nur die Funktion exfolder angepasst zu werden.

41 function exfolder(i) {
42 var bild1="offen.gif";
42.1 if (parent.z[i].aufbild==1) {
42.2 bild1="Ordner_offen.gif";
42.3 };
43 var bild2="minus.gif";
44 if (parent.z[i].opened==false) {
45 bild1="zu.gif";
45.1 if (parent.z[i].zubild==1) {
45.2 bild1="Ordner_zu.gif";
45.3 };
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 };

Es brauchen einfach nur die Zeilen 42.1 bis 42.3 und 45.1 bis 45.3 eingefügt werden. Für jedes weitere Symbol, das für einen geöffneten Ordner verwendet werden soll muß ein weiterer 3-Zeilen-Block wie 42.1 bis 42.3 eingefügt werden. Für jedes weitere Symbol, das für einen geschlossenen Ordner verwendet werden soll muß ein weiterer 3- Zeilen- Block wie 45.1 bis 45.3 eingefügt werden. Die Ziffer in der Zeile 42.1 bzw. 45.1 (parent.z[i].zubild==1) muß dabei der Ziffer entsprechen, die im Quelltext des Framesets angegeben wurde. Der Quelltext des Framesets müßte in diesem Beispiel also folgendermaßen lauten (die geänderten Stellen sind hervorgehoben):

Zeile Quelltext
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
2 <html>
3 <head>
4 <title>Friedels Explorer</title>
5 <script type="text/javascript">
6 <!--
7 function init_ex(level,opened,description,filename,zubild,aufbild) {
8 this.level=level;
9 this.opened=opened;
10 this.description=description;
11 this.filename=filename;
12 this.zubild=zubild;
13 this.aufbild=aufbild;
14 };
15 var z=new Array;
16 z[0]=new init_ex(0,true,"Beispiel1","Beispiel1.htm",0,0);
17 z[1]=new init_ex(1,true,"Beispiel2","Beispiel2.htm",1,0);
18 z[2]=new init_ex(1,false,"Ordner1","",0,0);
16 z[3]=new init_ex(2,true,"Beispiel3","Beispiel3.htm",0,0);
20 z[4]=new init_ex(2,true,"Beispiel4","Beispiel4.htm",0,0);
21 z[5]=new init_ex(1,true,"Ordner2","",0,0);
22 z[6]=new init_ex(2,true,"Beispiel5","Beispiel5.htm",0,0);
23 z[7]=new init_ex(2,true,"Ordner3","",0,0);
24 z[8]=new init_ex(3,true,"Ordner4","",1,1);
25 z[9]=new init_ex(4,true,"Beispiel6","Beispiel6.htm",0,0);
26 z[10]=new init_ex(3,true,"Beispiel7","Beispiel7.htm",2,0);
27 z[11]=ne init_ex(3,false,"Ordner5","",1,1);
28 z[12]=new init_ex(4,true,"Beispiel8","Beispiel8.htm",0,0);
29 z[13]=new init_ex(4,false,"Beispiel9","Beispiel9",0,0);
30 z[14]=new init_ex(-1,true,"","",0,0);
31 //-->
32 </script>
33 </head>
34 <frameset cols="210,*" framespacing=0 border=0 frameborder=0>
35 <frame src="nav.htm">
36 <frame src="Beispiel1.htm" name="inhalt">
37 </frameset>
38 </html>

Selbstverständlich muß für jedes neue Bild eine Zahl verwendet werden, die für diese Variable noch nicht verwendet wurde.

Weiter geht's mit der Beschreibung, welche Bilder im Explorer verwendet werden können auf der Seite Mögliche Bilder.


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