molily: Bannerrotation mit zufälliger Reihenfolge

Beitrag lesen

Hallo,

Irgendwie scheint dein Script ziemlich chaotisch zu sein, jedenfalls ist es aus verschiedenen Gründen nicht lauffähig und kann vom Aufbau her auch nicht die Anforderung »Bannerrotation mit zufälliger Reihenfolge« lösen. Meine Empfehlung: Schreibe es am besten neu. Zur Hilfe ein paar Anmerkungen:

Du kannst mit document.write() nur beim ersten Laden des Dokuments eine Grafik ausgeben. Wenn das Dokument einmal geladen ist, kommst du damit nicht weiter. Daher müsstest du über das DOM Änderungen am bestehenden Banner vornehmen. Deshalb bietet sich es auch dan, den Banner gleich mit JavaScript ins Dokument einzufügen.

So eine Programmlogik ist denkbar:
1. Beim Starten des Dokuments wird gelost, bei welchem Eintrag die Rotation begonnen wird.
2. Dann wird ein p-Element, ein a-Element und ein img-Element erzeugt mit den entsprechenden Link- und Grafikdaten und ins Element eingehängt.
3. Danach wird ein Intervall gestartet, der alle vier Sekunden (oder wie oft du willst) eine Funktion ausführt.
4. Die Funktion zählt die Variable hoch, in der die geloste Eintragsnummer steht. (Wenn die Variable schon beim Maximalwert steht, wird sie auf 0 zurückgesetzt.) Dann werden das a- und das img-Element im Dokument angesprochen und das href- bzw. das src-Attribut entsprechend angepasst.

Gut, ein paar Codeschnipsel.
Das ist jetzt weniger wichtig, aber die Bannerdaten speichert man am besten so:

var bannerdaten = [  
   { description : "Pro Sound Augsburg", link : "http://www.prosound-augsburg.de/" },  
   { description : "Jägermeister Promotion Team", link : "http://www.jaegermeister.de/" },  
   { description : "Getränkehandel Lehner", link : "http://www.laola-party.de/" },  
   { description : "Raiffeisenbank Aschberg eG", link : "http://www.rb-aschberg.de/" },  
   { description : "Raumausstattung Friegel GmbH", link : "http://www.friegel-holzheim.de/" }  
];

Das sieht auf den ersten Blick verwirrend aus, ist aber nichts kompliziertes.
[ elem1, elem2, elem3, ... ] ist eine Kurzschreibweise zur Erzeugung eines Arrays.
{ name1 : wert1, name2 : wert2, ... } ist eine Kurzschreibweise zur Erzeugung von Object-Objekten, die benutzen wir wie assoziative Arrays.

Auf den String "Pro Sound Augsburg" kann man dann z.B. einfach so zugreifen:
bannerdaten[0].description
Das ganze spart einem mehrere Arrays und sorgt für Ordnung.

Den Array »banner« in deinem Script halte ich für überflüssig, solange die GIF-Grafiken nummeriert sind und der Grafikname aus dem Array-Index ableitbar (bannerdaten[0] > banner0.gif).

Zu Schritt eins:

// Funktion bannerRotationStart nach dem Laden ausführen  
window.onload = bannerRotationStart;  
  
function bannerRotationStart () {  
   // Startindex zufällig festlegen und in der globalen Variable bannerIndex speichern  
   bannerIndex = Math.floor(bannerdaten.length * Math.random());  
  
   // Schritt 2: Elemente über das DOM erzeugen und einfügen  
   var pElement = document.createElement("p");  
   pElement.id = "banner";  
  
   var aElement = document.createElement("a");  
   aElement.id = "banner-link";  
   aElement.href = bannerdaten[bannerIndex].link;  
   aElement.title = bannerdaten[bannerIndex].description;  
  
   var imgElement = document.createElement("img");  
   imgElement.id = "banner-bild";  
   imgElement.alt = "";  
   imgElement.src = "banner" + bannerIndex + ".gif";  
  
   aElement.appendChild(imgElement);  
   pElement.appendChild(aElement);  
  
   // Wo auch immer du das Element einfügen willst, hier z.B. an den Dokumentanfang  
   document.body.insertBefore(pElement, document.body.firstChild);  
  
   // Schritt 3: Starte den Wechsel-Intervall alle 4000 Millisekunden = 5 Sekunden  
   window.setInterval("bannerRotationWechsle()", 4000);  
}

Schritt 4, Wechsel-Funktion, die wiederholt aufgerufen wird:

function bannerRotationWechsle () {  
   // bannerIndex um 1 erhöhen  
   if (bannerIndex == bannerdaten.length - 1) {  
      // Wenn schon am Ende der Bannerliste, zurücksetzen und wieder von vorne anfangen  
      bannerIndex = 0;  
   } else {  
      // Ansonsten einfach 1 addieren, um den nächsten Banner zu zeigen  
      bannerIndex++;  
   }  
  
   // Banner aktualisieren, indem die Attribute vom Link und der Grafik geändert werden:  
   var bannerLink = document.getElementById("banner-link")  
   bannerLink.href = bannerdaten[bannerIndex].link;  
   bannerLink.title = bannerdaten[bannerIndex].description;  
  
   var bannerBild = document.getElementById("banner-bild");  
   bannerBild.src = "banner" + bannerIndex + ".gif";  
}

Die Bannerelemente kannst du mit CSS etwa so formatieren:

<style type="text/css">  
[code lang=css]#banner { margin:10px 0; text-align:center; }  
#banner-bild { border-style:none; vertical-align:bottom; }

</style>[/code]

Das ist jetzt alles nur ein Vorschlag einer möglichen Lösung.

Mathias