brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]


verwandte Artikel und Seiten

Bannerrotation mit JavaScript

von Thomas Salvador.

Dieser Artikel liefert und dokumentiert eine einfache Bannerrotation, wie man sie von CGIs kennt. Aus einer Menge von möglichen Bannern wird ein zufälliger dargestellt und beim Anklicken wird die entsprechende Site geladen.

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

Daten

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

<script type="text/javascript"><!-
var bilder = new Array(

// diese Bilder gibt es alle nicht,
// sie dienen nur als Beispiele.

'http://www.brauchbar.de/logo.gif',
'http://www.yahoo.de/logo.gif',
'http://www.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(
'http://www.brauchbar.de',
'http://www.yahoo.de',
'http://www.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.

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, http://www.brauchbar.de
// Wiederverwendung erlaubt, solange der Hinweis vollstaendig und
// unveraendert erhalten bleibt. Verwendung ohne oder mit veraendertem
// Hinweis ist nicht erlaubt.
// Ein BackLink zur Site wird erbeten.

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,

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

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


Verwandte Artikel und Seiten



brauchbar web
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.

Copyright © 1999-2015 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei all-inkl.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.

zum Inhaltsverzeichnis der 19. Ausgabe.

Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/37.html .