Bannerrotation in JavaScript II

In "Bannerrotation mit JavaScript" wurde gezeigt, wie man in JavaScript eine einfache Rotation von Bannern realisiert.

Die Routinen dort wählten aus einer Liste von möglichen Bannern einen aus und verzweigen bei anklicken zu der für diesen Banner hinterlegten Adresse.

Nachteilig war dort die Nutzung von zwei Feldern: ein Feld für die Bilder und ein Feld für die Adressen. Diese müssen im Sync gehalten werden, damit die Adresse zum Bild passt.

Hier finden Sie nun eine Rotation, die mit Funktionsaufrufen betrieben wird. Sie ist daher einfacher zu nutzen und die Fehlerquelle für Verschiebungen fällt weg.

Darüber hinaus können Sie das JavaScript direkt von meinem Server laden und nutzen.

Der Source

Wir erstellen eine Datei banner.js, die das JavaScript enthält (oder laden es direkt von meinem Server, siehe Beispiel):

// bannerrotation II - Thomas Salvador, 2010, brauchbar.de
// free to use, if this notice is kept intact

var banner_data = new Array();

function banner_define(picture,link) {
 banner_data[banner_data.length] = new Array(picture,link);
}

function banner_output(id) {
 container = document.getElementById(id);
 no   = (new Date()).getTime()%banner_data.length;
 img  = banner_data[no][0];
 href = banner_data[no][1];
 container.innerHTML = '<a href="'+href+'" target="_top">'
 +'<img src="'+img+'"></a>';
}

Die Dokumentation

Die Banner werden als Feld banner_data angelegt, dessen Werte den URL des Bildes und den URL des Zieles enthalten. Es wird durch Aufrufe von banner_define(BildURL, LinkURL) gefüllt.

Die ausgebende Funktion heißt banner_output(id) und platziert den HTML-Code im Platzhalter id.

Dabei wird no die Nummer des Banners zugewiesen, der dargestellt werden soll.

Das funktioniert so: new Date() ist die aktuelle Systemzeit des Besuchers. Und getTime() liefert diesen Wert in Millisekunden seit Anfang 1970, was in einem extrem hohen Wert resultiert, der sich rasch ändert.

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.

Damit ist no recht zufällig ist. Er ist schlecht vorhersehbar und dürfte sich ändern, wenn der Besucher die Seite auffrischt.

Weiter ist img der URL zum Bild des Banners und href der URL zur Ziel des Verweises. In der Ausgabe wird das entsprechende HTML erzeugt.

Die Verwendung

Zur Einbindung platzieren Sie im Kopfbereich Ihres Dokumentes die Anweisung

<script type="text/javascript" src="banner.js"></script>

Sie können das Javascript direkt von meinem Server laden:

<script type="text/javascript" src="https://brauchbar.de/services/banner-100.js"></script>

Nun legen Sie fest, wo der Banner stehen soll und erzeugen dort einen leeren Container mit entsprechendem Namen:

<div id="meinbanner"></div>

Erzeugen Sie im Kopfbereich eine Funktion, die ihre Banner definiert und die Ausgabe fordert:

<script type="text/javascript"><!--
function mybanner() {
  banner_define("https://www.google.de/images/nav_logo7.png","https://google.de");
  banner_output("meinbanner");
}
//-->
</script>

Abschließend lassen Sie dieses Script starten, wenn das Dokument geladen wurde. Geeignet ist hier der onload-Event des <body>-Tag:

<body onload="mybanner();">

Das Beispiel

In diesem Beispiel wird einer von drei Bannern gezeigt. Bei nur zwei Bannern wird natürlich häufiger der gleiche ausgegeben, soll uns als Beispiel aber genügen.

<html>
<head>
<title>Banner-Beispiel</title>
<script type="text/javascript"
  src="https://brauchbar.de/services/banner-100.js"></script>
<script type="text/javascript"><!--
  function mybanner() {
    banner_define('https://brauchbar.de/images/bb-logo.gif',
      'https://brauchbar.de');
    banner_define('https://www.google.de/intl/de_de/images/logo.gif',
      'https://google.de');
    banner_output("meinbanner");
  }
//-->
</script>
</head>
<body onload="mybanner();">
<p>Vor dem Banner.</p>
<div id="meinbanner"></div>
<p>Nach dem Banner.</p>
</body>
</html>

Das sieht so aus:

Vor dem Banner.

Nach dem Banner.

Natürlich können Sie auch die definierende mybanner() in eine separate Datei auslagern und somit auf mehreren Seiten nutzen.

Lagern Sie etwa Ihre Definitionen in mybanner.js aus, so verkürzt sich das Beispiel auf:

<html>
<head>
<title>Banner-Beispiel</title>
<script type="text/javascript" src="https://brauchbar.de/services/banner-100.js"></script>
<script type="text/javascript" src="mybanner.js"></script>
</head>
<body onload="mybanner();">
<p>Vor dem Banner.</p>
<div id="meinbanner"></div>
<p>Nach dem Banner.</p>
</body>
</html>

Und ist so leicht auf Ihrer ganzen Site nutzbar.