Geschrieben von h2o am 13.02.2005, 15:20

Wie man ein zufälliges Banner erzeugt steht bereits in diesem Tutorial:
http://www.lima-city.de/tutorials?m=show&id=984

Hier wird erklärt, wie man durch JavaScript errechen kann, dass im body ein Banner (und Link) verändert wird.
Dieses Script muss im head eingebunden werden:

<script type="text/javascript">
<!--
var aktuell = 1;
function banner() {
var daten = new Array("http://...bild1","http://...link1",
"bild2.gif","seite.htm",
"...","...",
"...","...");
var nunbild = aktuell * 2;
var bild = daten[nunbild];
var link = daten[nunbild + 1];
var insan = daten.length / 2;
aktuell++;
if (aktuell >= insan) {
aktuell = 0;
}
document.getElementById("randlink").href = link;
document.getElementById("randbild").src = bild;
warte();
}
function warte() {
var wartezeit = 5000; // 1000 = 1 Sekunde
window.setTimeout('banner();',wartezeit);
}
// -->
</script>

In den body-Tag muss noch onload="warte();" geschrieben werden
An der Stelle, wo das Banner erscheinen soll, wird in den body Folgendes notiert:
<a href="http://...link1" id="randlink"><img src="http://...bild1" alt="" id="randbild" width="Breite" height="Höhe" border="0"></a>

Wichtig ist, dass die Bildadresse und der Link den gleichen Inhalt haben, wie der erste Array-Eintrag oben. Das ist sinnvoll, damit User mit deaktiviertem JavaScript auch etwas sehen.

Erklärung:
var daten = new Array("http://...bild1","http://...link1",
"bild2.gif","seite.htm",
"...","...",
"...","...");

Links steht die Adresse des Banners, rechts die Adresse, auf die verlinkt werden soll.
Will man ein Banner (und Link) anhängen einfach die zwei Einträge anhängen.
Bei nur zwei Bannern sieht die Variable dann z.B. so aus:
var daten = new Array("Bild 1","Link 1",
"Bild 2","Link 2");
Die Höhe und Breite des Bildes kann natürlich mit width="..." und height="..." beliebig verändert werden.

Ablauf:
Als Erstes wird beim Laden der Seite (onload), die Funktion warte() aufgerufen.
Diese Funktion steuert die zeitlichen Abfolgen im Script, also nach wie vielen Sekunden sich das Banner ändern soll.
Der Beispiel-Wert entspricht 5000 Millisekunden, was 5 Sekunden gleich kommt.
Nach dieser Zeit wird also die Funktion banner() aufgerufen, die den aktuellen Wert (akutell) mal 2 nimmt und dann aus dem Array die Adressen ausliest und sie dem Bild und dem Link neu zuweist.
Danach wird die Variable aktuell um 1 erhöht (aktuell++) um beim nächsten Mal ein anderes Banner angezeigt zu bekommen.
Allerdings wird noch überprüft ob die Varialbe nun größer ist, als es Angaben gibt. Ist das der Fall wird aktuell auf 0 gesetzt.
Als letztes wird dann die Funktion warte() erneut aufgerufen um zu erreichen, dass nach 5 Sekunden, wieder das Banner wechselt.

Bei Fragen könnt ihr euch gerne per PN an mich richten ;)

Bewertung Anzahl
6
100,0 %
9 Bewertungen