Bannerrotation in JavaScript

• Daten
• Darstellung
• Verwendung
• Auslagerung
• Komplett-Sourcecode zum Kopieren

Dies zu realisieren, ist recht einfach, wie wir sehen werden.

Daten

Wir benötigen also ein paar Bilder. Dazu bietet sich ein Feld an.

// diese Bilder gibt es alle nicht,
// sie dienen nur als Beispiele.
var bilder = new Array(
  'https://brauchbar.de/logo.gif',
  'https://yahoo.de/logo.gif',
  'https://altavista.de/logo.gif'
);

Ein zweites Feld urls hält die zu den Bildern gehörenden URLs. Achten Sie hier nur darauf, dass die Reihenfolge passt, da sonst die Zuordnung Bild → URL nicht stimmt.

var urls = new Array(
  'https://brauchbar.de',
  'https://yahoo.de',
  'https://altavista.de'
);

Darstellung

Natürlich wird eine Routine benötigt, die den Banner darstellt. Wir machen es so, dass banner() den kompletten HTML-Code generiert, so dass wir beliebig viele Banner auf einer Seite verwenden können und uns zudem jede Art von Clickpufferung ersparen.

var no= (new Date()).getTime()%bilder.length;

no ist die Nummer des Banners der dargestellt werden soll. Die Zeile sieht vielleicht etwas abenteuerlich aus, liefert aber im Endeffekt einen recht guten zufälligen Wert aus dem Bereich von 0 bis (Anzahl Banner - 1).

Nehmen wir die Anweisung auseinander: new Date() ist die aktuelle Systemzeit des Besuchers getTime() liefert diesen Wert in Millisekunden seit Anfang 1970, was in einen extrem hohen Wert resultiert. Dies wiederum % (modulo) die Anzahl der Banner liefert das Ergebnis. Da modulo die Funktion zur Restbildung ist. liefert A % B immer einen Wert aus dem Bereich 0 bis B-1. Bsp: 15 % 7 = 1, denn 2*7+1=15.

Nun die Implementierung von banner():

function banner() {
  // bannerRotation von Thomas Salvador, 2000, brauchbar.de
  // Wiederverwendung erlaubt, solange der Hinweis vollstaendig und
  // unveraendert erhalten bleibt. Verwendung ohne oder mit veraendertem
  // Hinweis ist nicht erlaubt.

  var no= (new Date()).getTime()%bilder.length;

  document.write('<a href="'+urls[no]+'" target="_top">');
  document.write('<img src="'+bilder[no]+'"></a>');
}

Wir sehen, dass der HTML-Source einfach per document.write() erzeugt wird. Wie genau man nun die Parameter in den document.write() Anweisungen vergibt, ist eher Geschmackssache. Wenn alle Banner gleich groß sind, wird man wahrscheinlich z.B. diese Angaben setzen.

Es ist auch denkbar, ganz analog zusätzliche Felder für die Ausdehnungen und ggf. Beschreibungen der Banner einzuführen und in die HTML-Anweisungen zu generieren, was qualitativ sauber gemachte Anzeigen produziert.

Verwendung

An der Stelle, wo Sie den oder einen Banner setzen möchten, sagen Sie schlicht

<script type="text/javascript"><!--
banner();
//-->
</script>

Läßt man die Auskommentierung fort, verkürzt es sich zu:

<script type="text/javascript">banner();</script>

Da type die Voreinstellung text/javascript hat, brauchen wir ihn nicht:

<script>banner();</script>

So sieht man die Kompaktheit besser. Das ist weniger, als man beim durchschnittlichen CGI angeben muss.

Sieht man davon ab, dass das Ganze nur mit JavaScript funktioniert, bleibt als einziges Problem, dass dieses Script aufgrund der Daten länglich werden kann.

Es ist dann nicht nur unhandlich und lästig in der Verwaltung, es senkt auch die Ladezeit der Seiten. Da hilft die

Auslagerung

Man gibt das Script nicht in jeder HTML-Datei neu an, sondern speichert es in einer separaten Datei banner.js

Im Kopfbereich jeder HTML-Datei steht dann nur noch

<script type="text/javascript" src="url"></script>

wobei url der URL von banner.js ist.

Beim ersten Antreffen wird das Laden der Webseite verzögert, weil die Datei banner.js zusätzlich übertragen wird. Auf allen folgenden Seiten geht es jedoch mit gewohnter Geschwindigkeit weiter, da hier banner.js aus dem Cache kommt.

Dies resultiert im Endeffekt nicht nur in einer höheren Performance für den Besucher, sondern auch in einer um ein Vielfaches besseren Wartbarkeit.

Änderungen an der Bannerliste oder an der Darstellungsroutine müssen nur einmal an einer zentralen Stellen in banner.js geändert werden.

Komplett-Sourcecode zum Kopieren

Ihre banner.js Datei sieht so aus, wobei Sie dann nur noch bilder und urls anpassen müssen:

// diese Bilder gibt es alle nicht, sie dienen nur als Beispiele.
var bilder = new Array(
  'https://brauchbar.de/logo.gif',
  'https://yahoo.de/logo.gif',
  'https://altavista.de/logo.gif'
);

var urls = new Array(
  'https://brauchbar.de',
  'https://yahoo.de',
  'https://altavista.de'
);

function banner() {
// bannerRotation von Thomas Salvador, 2000, brauchbar.de
// Wiederverwendung erlaubt, solange der Hinweis vollstaendig und
// unveraendert erhalten bleibt. Verwendung ohne oder mit veraendertem
// Hinweis ist nicht erlaubt.

var no= (new Date()).getTime()%bilder.length;
document.write('<a href="'+urls[no]+'" target="_top">');
document.write('<img src="'+bilder[no]+'"></a>');
}

Wie im Artikel erwähnt, ist es wichtig, dass Bilder und URLs in der gleichen Reihenfolge angegebe sind.