Homepagebau
Dateiversion:
diesen Beitrag diskutieren,
ergänzen, eine Frage stellen

Bannerrotation

Schwierigkeit: für Fortgeschrittene

 


3 kbyte

Skript downloaden

Beschreibung:

Eine beliebte Gelegenheit für die eigene Homepage zu werben nennt sich Bannerrotation. Das arme Opfer - hier der Webmaster - muss dabei nicht 2 verschiedene Banner sondern nur jeweils einen anzeigen und spart sich selbst damit Platz und seinen Besuchern Nerven - wie muss ein Skript aussehen, dass mal den einen, mal einen anderen Banner lädt?

Beispiel:

Ein recht simpel gestricktes aber funktionierendes Beispiel... was wir brauchen ist eine "Random" Funktion, eine Funktion, die einen Banner anzeigt und eine, die jeweils die passende URL bei Klick öffnet.

Quelltext:

Was wir zunächst tun, ist ein wenig im HTML herum zu tricksen:

HTML:

<head>
<script src="ads.js"></script>
</head>

<body onLoad="change_src();">
<a onclick="set_url()" href="#"><img name="banner" border="0" src="banner.gif"></a>
</body>

Wir haben quasi nur einen Namen für unseren Banner und die Funktionen vergeben. Die Adresse des Banners lautet nun "document.banner", wird geklickt startet per "onClick" die Fuktion "set_url()", die wir noch schreiben müssen. Die importierte Datei "ads.js" wird unseren Quelltext enthalten. Dies bietet sich hier an - damit der Besucher im Quelltext nicht die URLs der Banner sieht - und "change_src()" wird die noch zu schreibende Funktion heißen, die unsere Banner lädt.
Anmerkung: sie können prinzipiell jedes Skript, dass sie mehrmals verwenden möchten auch als Datei mit der Endung ".js" speichern. Das "src" (Source) Attribut des Script-Tags bietet ihnen die Möglichkeit, Skripte aus einer solchen Datei zu importieren. So stellen sie zum Beispiel bei Bedarf auch befreundeten Webseiten eigene Skripte zur Verfügung, ohne dass deren Webmaster ihr Skript downloaden oder sich um dessen Pflege sorgen müssen.

ads.js:

Nun schreiben wir "change_src": eine Funktion, die einen Banner anzeigt.

// zunächst speichern wir die zu ladenden Banner einfach nacheinander in einem Array.
 adimage = new Array();
adimage[0] = "images/banner1.gif";
adimage[1] = "images/banner2.gif";
...

Anmerkung: um eine Feldvariable zu erzeugen benutzen wir den Konstruktor "new".
Syntax: [variablenname] = new Array( [Länge des Array] oder [durch ',' getrennte Liste der Elemente] oder [leer])

// in gleicher Weise speichern wir die ZielURLs.
 adurl = new Array();
adurl[0] = "http://URL1";
adurl[1] = "http://URL2";
...

// nun  initialisieren wir eine Zählervariable mit einem zufälligen Wert
var i =randomg(); // diese Var. gibt die Nummer des gerade geladenen Banners an

Anmerkung: es empfiehlt sich nicht, hier den eingebauten Zufallsgenerator zu verwenden. Weiter unten beschreiben wir eine eigens für diesen Zweck geschriebene Variante.

function change_src()
{
// als erstes erhöhen wir den Zähler um 1...
if (i<adimage.length-1) { i++ }
// sollten wir schon das letzte Bild erreicht haben, setzen wir den Zähler auf 0 zurück...
else { i=0 }
 
// ... fertig! In 20 Sekunden laden wir einen anderen Banner
timer = setTimeout('change_src()',20000);
}

Wir brauchen für die Initialisierung einen Zufallsgenerator. Bitte nehmen sie einfach nur zur Kenntnis, dass dieses Skript funktioniert. Es gibt eine Vielzahl von Alternativen. Für uns reicht diese aber zunächst aus. Man vermeidet die Verwendung von "Math.random()" für gewöhnlich, da der eingebaute Generator nicht plattformunabhängig arbeitet. Der Netscape-Browser, sowie angeblich auch Macsysteme haben damit ihre Probleme, da "Math" ein Microsoft JScript-Objekt und somit keine original JavaScript-Komponente ist. Das heißt, MS-Browser liefern u. U. andere Werte als Netscape und Co.

// nur ein simpler Zufallsgenerator
function randomg()
{ var random_number = new Date().getSeconds();
   return Math.floor(random_number*(adimage.length/59)); };

Damit wären wir fast fertig - fehlt nur noch die Funktion, die uns sagt, welche Seite wir öffnen sollen. "set_url()"

function set_url()
{
    window.open(adurl[i], '_blank'); // wir öffnen die URL in einem neuen Fenster
}

Anmerkung: Wenn sie mehr über window.open() erfahren wollen, können sie die Syntax unter "Pop-Ups" nachschlagen.

 

Autor: Thomas Meyer

Home: www.All-Community.de

 Kontakt: