// pic_changer.js // written by florian schiller May 2009 // das Script tauscht ein Bild in einem DIV-TAG, // das über ein Stylesheet in style="background: url(bildname.suffix);" // in ein DIV-TAG eingebunden ist. Das DIV wird über die ID angesprochen // Die Vorformatierung des DIVs erfolgt in einem ausgelagerten Stylesheet // über die Klasse div.image {..} und wird nur durch die Bild-URL im // inline-Style ergänzt! // Variablendeklaration // bildURL - enthält später den Verweis und Namen des zu zeigenden Bildes var bildURL=""; // anlegen des Bild-Arrays (einfach erweiterbar) var imageArray = new Array(); // Arrayname "imageArray" ist frei gewählt! Lesen: Variable mit Namen NAME vom Typ: neues Array imageArray[0] = "bilder/00_sub-headimg.jpg"; // Füllung der Felder mit Bildnamen als String ... imageArray[1] = "bilder/01_sub-headimg.jpg"; imageArray[2] = "bilder/02_sub-headimg.jpg"; imageArray[3] = "bilder/03_sub-headimg.jpg"; imageArray[4] = "bilder/04_sub-headimg.jpg"; imageArray[5] = "bilder/05_sub-headimg.jpg"; imageArray[6] = "bilder/06_sub-headimg.jpg"; imageArray[7] = "bilder/07_sub-headimg.jpg"; imageArray[8] = "bilder/08_sub-headimg.jpg"; imageArray[9] = "bilder/09_sub-headimg.jpg"; imageArray[10] = "bilder/10_sub-headimg.jpg"; imageArray[11] = "bilder/11_sub-headimg.jpg"; imageArray[12] = "bilder/12_sub-headimg.jpg"; imageArray[13] = "bilder/13_sub-headimg.jpg"; imageArray[14] = "bilder/15_sub-headimg.jpg"; imageArray[15] = "bilder/16_sub-headimg.jpg"; imageArray[16] = "bilder/17_sub-headimg.jpg"; imageArray[17] = "bilder/19_sub-headimg.jpg"; imageArray[18] = "bilder/20_sub-headimg.jpg"; imageArray[19] = "bilder/21_sub-headimg.jpg"; imageArray[20] = "bilder/22_sub-headimg.jpg"; imageArray[21] = "bilder/23_sub-headimg.jpg"; imageArray[22] = "bilder/24_sub-headimg.jpg"; // Ermittlung einer Zufallszahl aus dem Bereich 0 bis Array-Länge // imageArray-length ist 22, da das Array 22 Einträge enthält // Da der Index mit 0 beginnt, muss das Ergebnis der Zufallszahlen // um 1 redzuiert werden. Damit erhalten wir die gewünschten Werte // von von 0 bis 21. Bei 22 würde kein Bild gezeigt und da die 0 nie // vorkäme, würde das erste Bild im Array nie gezeigt!!! function randomSelect() { // Funktionsdeklaration (Name frei wählbar) var zufallswert = 0; // "zufallswert" wird deklariert und auf 0 gesetzt zufallswert = Math.random(); // "zufallswert" wird mit einer Zufalls-gleitkomma-Zahl 0.irgendwas gefüllt zufallswert *= imageArray.length; // "zufallswert" wird mit dem Index der Array-Einträge multipliziert zufallswert = Math.ceil(zufallswert); // der in "zufallswert" gespeicherte Real-Wert wird auf den nächsten Integer gerundet. -1 hier oder eine Zeile Tiefer im Indexfeld! (sonst Werte von 1 bis 22, gebraucht werden 0 bis 21!!! bildURL = imageArray[zufallswert-1] // "zufallswert" wird zum Index-Verweis des imageArrays. Der Inhalt dieses Indexes (String) wird in bildURL gespeichert // bildURL = 'url(bilder/'+ imageArray[zufallswert] +')'; // alternative Schreibweise --- müsste in Funktion setzeBild() dann auch korrigiert werden! return; // gibt an, das das Ergebnis der Funktion weitergegeben wird } // Funktion zum ersetzen des CSS-Background-Bildes. Wird im -TAG über onLoad="setzeBild();" aufgerufen! // In der HTML-Datei ist im inline-Style bereits ein Bild eingetragen, um ausgeschaltetes JavaScript oder // Ladefehler und zu lange Ladezeiten zu umgehen function setzeBild() { randomSelect(); // die obige Funktion randomSelect() muss ausgeführt werden. Entweder über einen EventHandler wie onMouseOver oder eben wie hier in einer anderen Funktion // für Tausch eines Bildes innerhalb eines Image-TAGs: // document.getElementById("id-name").src = bildURL; // hier der Austausch im StyleSheet document.getElementById('picHead').style.backgroundImage="url("+ bildURL +")"; // hier wird der Bildaustausch vorgenommen. Das DIV im HTML-File hat die ID id="picHead" name="picHead" !!! // document.getElementById('picHead').style.backgroundImage=bildURL; // in Funktionsbeschreibung zu randomSelect() erwähnte alternative Schreibweise! return; } /* Hinweis zu CSS Zugriffsnotation!!!: Befehle in CSS, die einen Bindestrich enthalten, werden in JavaScript nach allgemeingültiger Regelung der W3C so geschrieben: CSS: background-image: url(bildname.suffix); = JavaScript: backgroundImage="url(bildname.suffix)"; ----- ebenso: padding-left: XX; = paddingLeft="XX"; margin-top: XX; = marginTop="XX"; font-familiy: XX; = fontFamily="XX"; etc. */