Erklärungen zu Code - Photoalbum

[papillona]

Hallo zusammen,
ich habe auf der selfhtml.org-Seite ein Script für ein Photoalbum gefunden, eingebunden und es funktioniert soweit auch ganz wunderbar. Ich möchte nun aber zu jedem Bild noch einen Text haben, der sich natürlich beim klick auf "weiter" ändert. Ich schätze, dass man dieses mit dem Objekt/Variable/Attribut.... :?: .name machen kann. Deshalb habe ich mir nun im Code Kommentare drangeschrieben, was wo passiert, um dann Bild[...].name einfügen und ausgeben lassen zu können. Aber an manchen Stellen verstehe ich nix mehr. Vorallem ist da die Rede von Kind-Knoten. Ist das vorherige Bild immer die Wurzel des Baumes oder wie muss ich das verstehen??? Es wäre toll, wenn mir eventuell jemand da, wo die Fragezeichen in den Kommentaren sind, die entsprechende Ergänzung geben kann bzw. eventuelle Fehlinterpretation meinerseits korrigiert, damit ich den Code gänzlich verstehe und dann das .name irgendwie mit verwursteln kann. Ich weiß, der Code ist etwas lang, aber wäre tortzdem toll. :razz:

var Bild = new Array();
Bild[0] = new Image();
Bild[0].src = "bilder/hochzeit/001.JPG";
Bild[0].name = "Erstes Bild";
Bild[1] = new Image();
Bild[1].src = "bilder/hochzeit/002.JPG";
Bild[2] = new Image();
Bild[2].src = "bilder/hochzeit/003.JPG";
Bild[3] = new Image();
Bild[3].src = "bilder/hochzeit/004.JPG";
Bild[4] = new Image();
Bild[4].src = "bilder/hochzeit/005.JPG";
Bild[5] = new Image();
Bild[5].src = "bilder/hochzeit/006.JPG";
Bild[6] = new Image();
Bild[6].src = "bilder/hochzeit/007.JPG";
Bild[7] = new Image();
Bild[7].src = "bilder/hochzeit/008.JPG";
Bild[8] = new Image();
Bild[8].src = "bilder/hochzeit/009.JPG";
Bild[9] = new Image();
Bild[9].src = "bilder/hochzeit/010.JPG";
Bild[10] = new Image();
Bild[10].src = "bilder/hochzeit/011.JPG";
Bild[11] = new Image();
Bild[11].src = "bilder/hochzeit/012.JPG";
Bild[12] = new Image();
Bild[12].src = "bilder/hochzeit/013.JPG";
Bild[13] = new Image();
Bild[13].src = "bilder/hochzeit/014.JPG";
Bild[14] = new Image();
Bild[14].src = "bilder/hochzeit/015.JPG";
Bild[15] = new Image();
Bild[15].src = "bilder/hochzeit/016.JPG";
Bild[16] = new Image();
Bild[16].src = "bilder/hochzeit/017.JPG";
Bild[17] = new Image();
Bild[17].src = "bilder/hochzeit/018.JPG";
Bild[18] = new Image();
Bild[18].src = "bilder/hochzeit/019.JPG";
Bild[19] = new Image();
Bild[19].src = "bilder/hochzeit/020.JPG";
Bild[20] = new Image();
Bild[20].src = "bilder/hochzeit/021.JPG";
Bild[21] = new Image();
Bild[21].src = "bilder/hochzeit/022.JPG";
Bild[22] = new Image();
Bild[22].src = "bilder/hochzeit/023.JPG";
Bild[23] = new Image();
Bild[23].src = "bilder/hochzeit/024.JPG";
Bild[24] = new Image();
Bild[24].src = "bilder/hochzeit/025.JPG";
Bild[25] = new Image();
Bild[25].src = "bilder/hochzeit/026.JPG";

var bildbereich;                  //Bild
//var textbereich;                  //Bildbeschreibung
var zeige = 0;                   //nächstes, vorheriges Bild
var Breite = 300;
var aktuelleBreite = 0;
var Schrittweite = 6;            //??
var Schrittverzoegerung = 1;     //??

function Blaettern (Richtung) {   //Richtung kann +1(vor) oder -1(zurück) sein
  zeige = zeige + Richtung;       //geht ein Schritt weiter
  if (zeige > Bild.length - 1) { //wenn zeige größer Array-Länge
    zeige = 0;                   //setze zeige auf Bild 1
  } else if (zeige < 0) {        //wenn zeige kleiner 0
    zeige = Bild.length - 1;     //setze zeige auf letztes Bild
  }
 
  if (DOM || MSIE4) {            //Konfiguration für unterschiedliche Browser
    bildbereich.style.clip = "rect(0 0 225px 0)";
  } else if (NS4) {
    bildbereich.clip.right = 0;
  }
  if (DOM && bildbereich.firstChild) {    //wenn DOM & erster Kind-Knoten vorhanden??
    bildbereich.firstChild.src = Bild[zeige].src; //setze ersten Kind-Knoten.src auf das jeweilige Bild
  } else if (MSIE4) {                     //für Internet Explorer?
    bildbereich.innerHTML = '<img src="' + Bild[zeige].src + '">'; //HTML-Inhalt mit Bild befüllen
  } else if (NS4) {                       //für Netscape??
    bildbereich.visibility = "hide";      //bildbereich verstecken
    setContent("id", "Bildbereich", null, //Div Bildbereich mit Bild befüllen
      '<img src="' + Bild[zeige].src + '">');  
    bildbereich.visibility = "show";      //bildbereich anzeigen
    /*setContent("id", "Textbereich",  null, 'document.write("<br>" + Bild[zeige].name)');
    textbereich.visibility = "show";*/
  }
  BildAufbauen();                         //Aufruf der Methode BildAufbauen()
}

function BildAufbauen () {
  if (aktuelleBreite <= Breite) {         //wenn aktuelle Breite des Bildes? <= Breite des Bildbereiches?
   
 if (DOM || MSIE4) {                   //für Internet Explorer??
      bildbereich.style.clip = "rect(0 " + aktuelleBreite + "px 225px 0)";                                                        //Rechteck erzeugen mit akt. Breite x 225 px
    } else if (NS4) {                     //für Netscape
      bildbereich.clip.right = aktuelleBreite;  //Breite festlegen. Wofür???
    }
    aktuelleBreite = aktuelleBreite + Schrittweite;   //??
    window.setTimeout("BildAufbauen()", Schrittverzoegerung);   //??
  } else {
    aktuelleBreite = 0;
    if (DOM || MSIE4) {
      bildbereich.style.clip = "rect(0 " + Breite + "px 225px 0)";
    } else if (NS4) {
      bildbereich.clip.right = Breite;
    }
  }
}

function Init () {
  bildbereich = getElement("id", "Bildbereich");    //holt sich was aus dem Bildbereich (das Bild???)
  
if (DOM && document.createElement && bildbereich.appendChild) {  

                                                 //irgendein Element erzeugen & Kindknoten hinzufügen
    var img = document.createElement("img");        //img-Objekt erzeugen
    img.setAttribute("src", Bild[0].src);           //setzt Eigenschaften für img-Objekt mit src = Bild[...].src
    bildbereich.appendChild(img);                   //Kind=img-Objekt anfügen, 
  } else if (MSIE4) {
    bildbereich.innerHTML = '<img src="' + Bild[0].src + '">';
  } else if (NS4) {
    setContent("id", "Bildbereich", null,
      '<img src="' + Bild[0].src + '">');
    //setContent("id", "Textbereich", null, )
  }
}

Vielen Dank & Gruß
P.