Themen
Tutorials
Tools
Zufallsbanner mit Javascript
Zufallsbanner lassen sich mit Javascript realisieren. Dieses Tutorial zeigt zwei Möglichkeiten, einmal mit und einmal ohne Verlinkung der Bilder.
Beispiel
Laden Sie das Bild ein paar mal neu..
Wie so etwas erstellt werden kann zeigt das folgende Tutorial..
Zufallsbilder ohne Verlinkung
Das Beispiel zeigt unverlinkte Bilder nach dem Zufallsprinzip an. Alles was wir benötigen um so etwas zu realisieren sind a) Bilder, b) eine Javascript-Funktion und c) eine html-Datei. Die Javascript-Funktion kommt in eine externe Datei (banner.js). Die Funktion selbst sieht so aus:
Zuerst werden die Bilder gezählt, in unserem Beispiel sind es insgesamt 10. Also wird der Wert 10 der Variable number in Zeile 3 zugewiesen. Es folgt nun eine Berechnung nach dem Zufallsprinzip. Zeile sieben fragt, ob es insgesamt weniger als 10 Bilder sind, falls ja wird vor dem Wert eine 0 hinzugefügt. Der Grund dafür ist, dass alle Werte die gleiche Anzahl an Stellen aufweisen müssen, also 01, 02, 03, ... , 10, 11.. Zeile acht spricht die ID banner an, welche wir später in der html-Datei aufrufen werden. In der neunten Zeile wird unser Ergebnis zusammengebaut. Der Pfad muss entsprechend angepasst werden. Die Bilder haben alle den gleichen Namen und unterscheiden sich nur durch die Nummerierung, also pic01.jpeg, pic02.jpeg, usw.
Somit wäre schon mal die Javascript-Funktion fertig. Als nächstes schauen wir uns die html-Datei an..
Im <head> - Bereich wird die Javascript-Datei banner.js geladen, das <body> - Element lädt durch onload die Funktion assignBackground(). Jetzt taucht auch das <div> mit der ID banner auf, welches wir in der Funktion angesprochen haben.
Zufallsbanner mit Verlinkung
Wenn es sich bei den wechselnden Bildern um Werbebanner handelt macht es sicherlich Sinn diese mit der entsprechenden Webseite zu verlinken. Dazu benötigen wir ebenfalls eine Javascript-Funktion, die uns das realisiert. Das Ganze sieht folgendermaßen aus:
Die Funktion interval() sorgt für das Zufallsprinzip. Wir erstellen zudem zwei Arrays (Zeile 8 und 9), eins für die Bilder und eins für die Links.
Jetzt können beliebig viele Banner hinzugefügt werden.
Die ermittelte Zufallszahl entscheidet nun welche Position des Arrays ausgegeben werden soll (Zeile 21 und 22). Die Funktion get_banner() baut das Ergebnis zusammen und spricht die ID banner an. Die Schrägstriche werden zur Entwertung der Sonderzeichen benötigt, damit es nicht zu Syntax-Fehlern kommt.
Damit ist die Funktion komplett und wir können uns das Ergebnis über ein html-Formular anzeigen lassen...
Auch hier besteht wieder genau das gleiche Prinzip wie bei der Version ohne Verlinkung.