Eine einfache Bannerrotation benötigt man immer mal wieder auf einer Webseite. Hierfür kann man ein kleines Javascript verwenden, was per iframe in die Webseite eingebunden wird. So kann man jederzeit Banner oder anderen Bilder bei einem Reload der Seite einfach und schnell wechseln lassen.
Das Script funktioniert nur mit herkömmlichen HTML-Bannern (kein AdSense, Javascript-Code oder Flash-Banner). Auch ist es nicht möglich, die Banner permanent automatisch rotieren zu lassen – also z.B. alle 10 Sekunden. Das Script bietet eben nur die Option, bei einem Reload/Neuladen der Webseite immer wieder ein neues Banner anzuzeigen.
Und so geht´s – Bannerrotation ganz einfach:
1. HTML-Seite für die Bannerrotation anlegen
Den folgenden Code speichert man z.B. als banner.html ab. Die URL der zu verlinkenden Website und die URL zum Bannerbild müssen danach noch angepasst werden. Beim Aufruf wird per Zufallsgenerator immer eines der Banner angezeigt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center">
<script type="text/javascript">
<!--
var banner = new Array();
banner[0] = '<a href="https://www.werbebannerverlinkung.com" target="_blank"><img src="https://www.meineseite.de/werbebanner.jpg" align="bottom" width="728" height="90" border="0" alt="Mein Werbebanner1"></a>';
banner[1] = '<a href="https://www.werbebannerverlinkungzwei.com" target="_blank"><img src="https://www.meineseite.de/werbebanner_zwei.jpg" align="bottom" width="728" height="90" border="0" alt="Mein Werbebanner2"></a>';
banner[2] = '<a href="https://www.werbebannerverlinkungdrei.com" target="_blank"><img src="https://www.meineseite.de/werbebanner_drei.jpg" align="bottom" width="728" height="90" border="0" alt="Mein Werbebanner3"></a>';
ausgabe = Math.round(Math.random()*(banner.length-1));
document.write(banner[ausgabe]);
//-->
</script>
</div>
</body>
</html>Wichtige Tipps zum Script:
- banner[0] muß immer vorhanden sein und an erster Stelle stehen
- Weitere Banner können beliebig hinzugefügt werden, dann muss man die Nummer vorne erweitern: banner[3], banner[4], banner[5] usw.
- Es können Banner jeglicher Größe eingesetzt werden: anstatt width=”728″ height=”90 schreibt man dann im Quellcode z.B. width=”160″ height=”600 oder width=”300″ height=”250 .
- Genauso können natürlich auch Banner im Format .gif oder .png einfügt werden.
- Der Bannercode selber darf keinen Zeilenumbruch enthalten! Sonst funktioniert die Banner-Rotation nicht mehr.
- Die Hintergrundfarbe des iframe-Fensters kann über bgcolor=”#ffffff” angepasst werden. Außerdem können weitere CSS-Formatierungen über ein Stylesheet eingebunden werden, z.B. wenn auf der Seite auch noch ein Text erscheinen soll.
2. Datei banner.html per iFrame in bestehende Homepage einfügen
Nun muss die HTML-Seite mit der Bannerrotation natürlich noch in die bestehende Webseite eingebunden werden. Dazu einfach den folgenden Code an die Stelle setzen, wo die Banner erscheinen sollen:
<iframe style="width:728px;height:90px" frameborder="0" scrolling="no" marginheight="0px" marginwidth="0px" src="http://www.meineseite.de/banner.html"></iframe>Die Größe entsprechend der verwendeten Bannergröße noch anpassen – das war´s schon.
Hier noch die gängigsten Bannerformate im Überblick:
