Banner Rotator
Ein Banner Rotator ist ein JavaScript welches in bestimmten Zeitabständen eine Bannergrafik und den hinterlegten Link austauscht. Als Gerüst brauchst du einen IMG Tag in deinem HTML Dokument. Das Script braucht als Datenquelle ein Array mit den Adressen der Bannergrafiken und ein weiteres Array mit den dazupassenden URLs. Um die Attributwerte später ändern zu können müssen der Link und die Grafik eine Eindeutige ID habe.
<script type="text/javascript">
var grafix=new Array("banner1.png","banner2.png","banner3.png");
var urls=new Array("page1.html","page2.html","page3.html");
</script>
<a href="page1.html" id="link">
<img src="banner1.png" url="page1.html" id="banner">
</a>
Als nächstes brauchst du einen Zähler. Der Zähler wird bei jedem Durchlauf erhöht und dient gleichzeit dazu die nächste Grafik und URL aus den Arrays zu indizieren. Damit der Zähler nicht über die Anzahl der Elemente im Array wächst wird er Modulo der Elementanzahl genommen.
Den Austausch der Grafik und der Link Adresse übernimmt eine Funktion. Nach Ablauf einer kurzen Pause erhöht die Funktion den Zähler und ruft sich wieder selbst auf.
<script type="text/javascript">
var grafix=new Array("banner1.png","banner2.png","banner3.png");
var urls=new Array("page1.html","page2.html","page3.html");
var TIMEOUT=5000; // 5 sek.
var counter=0;
function runRotator()
{
document.getElementById('banner').src=grafix[counter];
document.getElementById('link').href=urls[counter];
counter=(counter+1)%grafix.length;
window.setTimeout("runRotator();",TIMEOUT);
}
</script>
<a href="page1.html" id="link">
<img src="banner1.png" url="page1.html" id="banner">
</a>
Jetzt fehlt nur mehr der erste Funktionsaufruf. Das kannst du per onLoad im <body> Tag erledigen. Auf jeden Fall muss das IMG Element schon im HTML Dokumentbaum existieren sonst greift die JavaScript Funktion in Leere und stellt ihren Dienst ein.
<body onLoad="runRotator();">
Zurück
This work is licensed under a Creative Commons Attribution-ShareAlike 2.0 Austria License.