Bannerrotation in JavaScript III

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.

In "Bannerrotation mit JavaScript II" wurde dies durch eine Rotation ersetzt, die mit Funktionsaufrufen betrieben wird. Sie ist daher einfacher zu nutzen und die Fehlerquelle für Verschiebungen fällt weg.

Hier nun finden Sie eine technische Verbesserung:

• Sie können zudem .swf Dateien nutzen und als Objekte einbinden.
• Sie können neben Bild und URL auch die jeweilige Größe angeben und so eine Rotation mit unterschiedlich großen Bildern erzeugen.
• Sie können eine alternative Beschreibung angeben, die auch als Tooltip genutzt wird.
• Und Sie können bei der Ausgabe eine Zeit angeben, nach der der Banner durch einen anderen ersetzt werden soll.

Somit können Sie sowohl einen zufälligen Banner darstellen lassen, aber auch eine echte Rotation über mehrere, ggf. unterschiedlich große Banner, ohne Neuladen der Seite erzeugen.

Und natürlich 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 III - Thomas Salvador, 2010, brauchbar.de
// free to use, if this notice is kept intact

var banner_data = new Array();

function banner_define(picture,link,width,height,alt) {
  l_picture = picture;
  l_link = link;
  if (banner_define.arguments.length > 2) {
    l_width = width;
  } else {
    l_width = 0;
  }
  if (banner_define.arguments.length > 3) {
    l_height = height;
  } else {
    l_height = 0;
  }
  if (banner_define.arguments.length > 4) {
    l_alt = alt;
  } else {
    l_alt = '';
  }
  banner_data[banner_data.length] = new Array(l_picture,l_link,l_width,l_height,l_alt);
}

function banner_output(id,delay,defined) {
  if (banner_output.arguments.length == 3) {
    no = defined;
  } else {
    no = (new Date()).getTime()%banner_data.length;
  }
  container = document.getElementById(id);

  img  = banner_data[no][0];
  href = banner_data[no][1];
  if (banner_data[no][2] != 0) {
    width=' width="'+banner_data[no][2]+'"';
  } else {
    width='';
  }
  if (banner_data[no][3] != 0) {
    height=' height="'+banner_data[no][3]+'"';
  } else {
    height='';
  }
  if (img.substr(img.length-4,4) == '.swf') {
    container.innerHTML = '<object type="application/x-shockwave-flash"'
      + ' data="'+img+'"'
      + width+height+'>'
      + '<param name="movie"'
      + ' value="'+img+'" />'
      + '</object>';
  } else {
    alt=' alt="'+banner_data[no][4]+'" title="'+banner_data[no][4]+'"';
    container.innerHTML = '<a href="'+href+'" target="_top">'
      + '<img border="0" src="'+img+'"'+width+height+alt+'></a>';
  }
  if (banner_output.arguments.length == 3) {
    setTimeout('banner_output("'+id+'",'+delay+','+((defined+1)%banner_data.length)+');',delay);
  } else {
    if (banner_output.arguments.length == 2) {
      setTimeout('banner_output("'+id+'",'+delay+');',delay);
    }
  }
}

Die Dokumentation

Bannerdefinition

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(picture,link,width,height,alt) gefüllt.

• picture: URL des Bildes, bzw. der Shockwave-Datei (notwendig)
• link: URL des aufzrufenden Seite (für Bilder, notwendig)
• width: Breite des Banners (optional)
• height: Höhe des Banners (optional)
• alt: Alternative Beschreibung (nur für Bild, optional)

Ausgabe

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

• id: der Platzhalter (id) des Containers (notwendig)
• delay: Wenn angegeben, Millisekunden bis zum Wechsel des Banners (optional)
• defined: Wenn angegeben wird bei genau diesem Banner gestartet, sonst zufällig (optional)

Banner bzw. erster Banner

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

Das funktioniert so:

• Ist defined angeben, wird dieser Wert genutzt.
• Ansonsten wir ein zufälliger gewählt. 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.

Bannerwechsel

Ist ein Wechsel mit delay gesetzt, wird nach dieser Verzögerung ein anderer Banner gezeigt.

Realisiert wird es so, dass für den via setTimeout der nächste Aufruf von banner_output eingeplanr wird.

• War defined gesetzt, wurde der erste Banner gew&auuml;hlt. Der nächste Aufruf stellt dann den jeweils nächsten Eintrag in der Liste dar und beginnt dann von vorne.

• Ohne defined war der erste Banner zufällig und der näste wird es wieder sein.

Darstellung

Weiter ist img der URL zum Banners und href der URL zur Ziel des Verweises.

In der Ausgabe wird das entsprechende HTML erzeugt. Im wesentlichen wird Unterschieden, ob einne Shockwave-Datei als Objekt angezeigt wird oder ein klickbares Banner.

Tatsälich könnten wir auch den link optional machen, und die gleiche Routine dann als Bannerrotation und als Diashow verwenden.

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-200.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 zwei Bannern und ein Flash-Banner gezeigt. Der Startbanner ist dabei freilich häufiger der gleiche, soll uns als Beispiel aber genügen.

Dabei lassen wir es fest beim ersten (Index 0) beginnen und alle 1000 Millisekunden, also jede Sekunde, auf den jeweils nächsten wechseln.

<html>
<head>
<title>Banner-Beispiel</title>
<script type="text/javascript"
  src="https://brauchbar.de/services/banner-200.js"></script>
<script type="text/javascript"><!--
  function mybanner() {
    banner_define('https://brauchbar.de/images/bb-logo2.gif',
      'https://brauchbar.de',468,60,'brauchbar');
    banner_define('https://www.google.de/intl/de_de/images/logo.gif',
      'https://google.de',468,60,'google');
    banner_define('https://brauchbar.de/images/flash-banner-demo.swf',
      'flash',468,60,'flash');
    banner_output("meinbanner",2000);
  }
//-->
</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:

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-200.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>

Viel Spaß mit dieser flexiblen Bannerrotation.