Bildttausch Zufallsgrafik
    
HOME
Quellcode ZURÜCK SITEMAP  

 Bildtausch - Zufallsgrafik   (Zeitvorgabe)

Ein Zufallsbild ersetzt die Anzeige einer Startgrafik / eines Statfotos nach voreingestellter Zeit. Hier wird eines von x eingetragenen Bildern zufällig ausgewählt und angezeigt.

Zufallsgrafik ersetzt Startgrafik nach x Sekunden

Sie können ein Banner, ein Foto oder ein Clipart-Image anzeigen lassen. Interessant ist die Auswahl einer immer gleichen Startgrafik (Startfoto). Ihre Seite erscheint also beim Aufbau erst einmal mit der Standardansicht. Das zweite, später angezeigte Grafik bringt dann die gewünschte Abwechslung.


Zuerst wird die Startgrafik angezeigt. Diese Startgrafik wird nach voreingestellter Zeit durch ein Zufallsbild ausgetauscht. Der eingestellte Zeitwert ist hier 5000 Millisekunden (5 Sekunden).


 Zum Testen klicken sie nach dem Bildtausch auf Reload


   Aufwand zum Einbau in ihre Seiten:

  • JavaScript im Head-Bereich ihrer HTML-Datei notieren
  • Startgrafik im Body-Bereich notieren
  • URLs der Zufallsgrafiken eintragen
  • Wartezeit in MIllisekunden eintragen



   Im Body-Bereich

Die HTML-Anweisungen zur Anzeige der Startgrafik wird in ihrer HTML-Seite an der Stelle notiert, wo die Grafik angezeigt werden soll. Die Grafik erhält eine ID, über die das Script den Austausch organisiert.
<img id="Startgrafik" src="../images/tag09.jpg" width="150" height="113" ... >



   Funktion

Für jede Zufallsgrafik wird die Grafik-URL in einen Array eingteragen. (Auszug): 


...

ImageArr[ImageArr.length] = "images/foto01.jpg";
ImageArr[ImageArr.length] = "images/foto02.jpg";

...
Nach diesem Schema können sie weitere Eintragungen notieren. Ich habe diese Art der Zuweisung für die Array-Elemente gewählt, weil sie weniger fehlerträchtig ist (Element-Nummern müssen nicht eingetragen werden).


Die Anzahl der eingetragenen Bild-URLs (Anzahl der Eintragungen) wird automatisch ermittelt.

Eine Zufallszahl 'Zufall04' mit einem Wert zwischen 0 und der Anzahl der Arrayelemente -1 wird ermittelt. Abhängig von der Zufallszahl wird der Wert im Array ausgewählt. Das Script organisiert den Austausch, imdem die zufällig ermittelte Bildquelle (Bild-URL) dem Bildobjekt mit der ID Startgrafik zugeordnet wird.

Wartezeit

Die Wartezeit / Verzögerung bis zur Anzeige der Tauschgrafik wird in Millisekunden eingetragen. Das ist die Zeit die das Script wartet, bis die Funktion 'ZufallsBild()' aufgerufen wird. 
// Wartezeit in Millisekunden eintragen hier 5000

var start = setTimeout("ZufallsBild()",5000);

















NACH OBEN