Random Banner / Bannerrotation

BastiS

Mitglied
ich suche ein php-, html- oder jscript, dass zb. 10 Werbebanner gleichzeitig anzeigen kann! Nun sollen sich aber diese 10 stck. abwechseln aber sollen nicht doppelt vorkommen!

wer kann mir helfen?

habe das hier gefunden:
http://www.tutorials.de/tutorials15063.html&highlight=random+banner

oder das:
http://www.tutorials.de/tutorials199309.html&highlight=random+banner

nur ist das alles nicht das richtige!

das hier ist alles nur auf einen banner ausgebaut:
http://www.rabenstein-webdesign.de/addons.php?name=Downloads&d_op=show&cid=6



Stellen Sie sich vor, Sie verwenden auf Ihrer Webseite 3 Werbe-Einblendungen in Form von kleinen Bannern. Die Einblendungen sind durch die Rotation nicht statisch, d.h. dass bei jedem Aufruf an den drei Positionen jeweils eine andere Grafik erscheinen kann. Die Banner-Informationen werden in einer Datenbank ähnlichen Struktur erfasst, aus der per Zufall drei Elemente ausgewählt werden sollen. Wenn Sie an dieser Stelle keine entsprechenden Vorkehrungen treffen, könnten zwei oder gar alle drei Anzeige-Positionen zum selben Zeitpunkt die gleiche Grafik enthalten und auf die gleiche Webseite verweisen. Sie würden Ihren kompletten Werbeplatz für lediglich eine Werbung nutzen. Die vielen anderen Werbe-Banner bekommt der Besucher nicht zu sehen. In einer fortgeschrittenen Banner-Rotation wollen wir eine Lösung für das vorgestellte Problem erläutern. Hierfür benötigen wir zunächst unsere „Datenbank“ in Form eines zweidimensionalen Arrays:

Code:
 <script language="JavaScript" type="text/javascript"> 
banner = new Array(); 
for(i = 0; i < 6; i++) banner[i] = new Array();  
 
banner[0][0]="banner0.gif"; 
banner[0][1]="Hier geht's zur Seite 0"; 
banner[0][2]="seite0.htm"; 
 
banner[1][0]="banner1.gif"; 
banner[1][1]="Hier geht's zur Seite 1"; 
banner[1][2]="seite1.htm"; 
 
... 
 
banner[5][0]="banner5.gif"; 
banner[5][1]="Hier geht's zur Seite 5"; 
banner[5][2]="seite5.htm";</script>
Das Array „banner[0-5]“ erfasst in jedem Element seiner ersten Dimension einen kompletten Banner. Da sich die Definitionen der einzelnen Banner sehr ähnelt, haben wir aus Platzgründen lediglich die ersten beiden, sowie das letzte Array-Element in unserem Code-Schnipsel aufgenommen. Die fehlenden Elemente werden durch Punkte „...“ gekennzeichnet. Die einzelnen Informationen der Banner werden in der zweiten Dimension „banner[x][0-2]“ erfasst. Während „banner[x][0]“ den jeweiligen Namen der Grafik enthält, erfassen wir neben einem Tooltip in „banner[x][1]“ eine Verlinkung in „banner[x][2]“. Das hier verwendete „x“ steht für den jeweiligen Indexwert des Banners.
Die jeweiligen Anzeige-Positionen der Banner im HTML-Dokument können beliebig gewählt werden. Für die Funktionalität unserer noch folgenden JavaScript-Definitionen ist es jedoch erforderlich, dass wir bereits in HTML die Positionen festlegen:

Code:
 <a href="seiten/seite0.htm" id="link0"><img src="banner/banner0.gif" id="img0" alt="Hier geht's zur Seite 0"></a> 
<a href="seiten/seite1.htm" id="link1"><img src="banner/banner1.gif" id="img1" alt="Hier geht's zur Seite 1"></a> 
<a href="seiten/seite2.htm" id="link2"><img src="banner/banner2.gif" id="img2" alt="Hier geht's zur Seite 2"></a>
In unserem Code-Schnipsel befinden sich alle drei Banner unmittelbar nebeneinander. Dies ist, wie bereits erwähnt, nicht erforderlich. Jede Grafik-Definition erhält, wie auch jede Verlinkung, mittels „Id“-Anweisung einen eindeutigen Namen. Dies ist notwendig, um zu einem späteren Zeitpunkt auf die einzelnen Elemente problemlos zugreifen zu können, um so beispielsweise den Pfad einer Grafik anzupassen.
Damit bei jedem neuen Aufruf des Dokuments die Banner rotieren, übernimmt eine JavaScript-Funktion „rotate“ die Verwaltung der Werbe-Banner:

Code:
 <script language="JavaScript" type="text/javascript"> 
function rotate() { 
    if(document.getElementsByTagName) { 
        var n = new Array(); 
        do  
            for(i = 0 ; i < 3; i++) n[i] = Math.round(Math.random() * 5); 
        while(n[0]==n[1] || n[0]==n[2] || n[1]==n[2]); 
        image = document.getElementsByTagName('img'); 
        link = document.getElementsByTagName('a'); 
 
        for(i = 0; i < 3; i++) { 
            ni = n[i]; 
            image["img" + i].src = "banner/" + banner[ni][0]; 
            image["img" + i].alt = "seiten/" + banner[ni][1]; 
            link["link" + i].href = banner[ni][2]; 
        } 
    } 
} 
</script>
Wir beginnen sofort mit der schwierigsten Anforderung an die Funktion. Damit jede Banner-Anzeige voneinander verschieden ist, d.h. ein Banner aus der Datenbank nicht zwei mal zum selben Zeitpunkt selektiert wird, durchlaufen wir eine „while“-Schleife mit einer entsprechenden Überprüfung. Innerhalb der „while“-Schleife generieren wir drei Zufallszahlen in einem weiteren Array „n“. Damit wir in den Dimensionen unseres Arrays „banner“ bleiben, können die Zahlen jeweils einen Wert zwischen „0“ und „5“ annehmen. Wenn Sie die Anzahl der Banner verändern, müssen Sie folglich stets das Intervall für die Zufallszahlen anpassen. In der Abbruch-Bedingung der „while“-Schleife überprüfen wir nun, ob zwei Elemente des Arrays „n“ den gleichen Wert besitzen.
Sobald wir ausschließlich unterschiedliche Werte in unserem Array „n“ besitzen, müssen wir nur noch den Anzeigepositionen der Werbe-Banner die neuen Informationen für Dateipfad, Tooltip und Verlinkung zukommen lassen. Dies erledigen wir wiederum in einer Schleife nacheinander, für jede der drei Anzeige-Positionen.
Damit unser Script überhaupt ausgeführt wird, bedarf es eines Aufrufes der Funktion „rotate“ nach dem Ladevorgang des Dokuments:

Code:
<body onLoad="rotate();">
Dies übernimmt üblicherweise ein „onLoad“-Event im Body-Tag des HTML-Dokuments.

Beispieldatei herunterladen [download=[URL="http://www.onetwomax.de/newsimg/2004/11/09/thumb_1100025383_Mehrfache_Banner_Rotation.zip"]Mehrfache_Banner-Rotation.zip[/URL]]

Stellen Sie sich vor, Sie verwenden auf Ihrer Webseite 3 Werbe-Einblendungen in Form von kleinen Bannern. Die Einblendungen sind durch die Rotation nicht statisch, d.h. dass bei jedem Aufruf an den drei Positionen jeweils eine andere Grafik erscheinen kann. Die Banner-Informationen werden in einer Datenbank ähnlichen Struktur erfasst, aus der per Zufall drei Elemente ausgewählt werden sollen. Wenn Sie an dieser Stelle keine entsprechenden Vorkehrungen treffen, könnten zwei oder gar alle drei Anzeige-Positionen zum selben Zeitpunkt die gleiche Grafik enthalten und auf die gleiche Webseite verweisen. Sie würden Ihren kompletten Werbeplatz für lediglich eine Werbung nutzen. Die vielen anderen Werbe-Banner bekommt der Besucher nicht zu sehen. In einer fortgeschrittenen Banner-Rotation wollen wir eine Lösung für das vorgestellte Problem erläutern. Hierfür benötigen wir zunächst unsere „Datenbank“ in Form eines zweidimensionalen Arrays:


Code:
 <script language="JavaScript" type="text/javascript"> 
banner = new Array(); 
for(i = 0; i < 6; i++) banner[i] = new Array();  
 
banner[0][0]="banner0.gif"; 
banner[0][1]="Hier geht's zur Seite 0"; 
banner[0][2]="seite0.htm"; 
 
banner[1][0]="banner1.gif"; 
banner[1][1]="Hier geht's zur Seite 1"; 
banner[1][2]="seite1.htm"; 
 
... 
 
banner[5][0]="banner5.gif"; 
banner[5][1]="Hier geht's zur Seite 5"; 
banner[5][2]="seite5.htm";</script>



Das Array „banner[0-5]“ erfasst in jedem Element seiner ersten Dimension einen kompletten Banner. Da sich die Definitionen der einzelnen Banner sehr ähnelt, haben wir aus Platzgründen lediglich die ersten beiden, sowie das letzte Array-Element in unserem Code-Schnipsel aufgenommen. Die fehlenden Elemente werden durch Punkte „...“ gekennzeichnet. Die einzelnen Informationen der Banner werden in der zweiten Dimension „banner[x][0-2]“ erfasst. Während „banner[x][0]“ den jeweiligen Namen der Grafik enthält, erfassen wir neben einem Tooltip in „banner[x][1]“ eine Verlinkung in „banner[x][2]“. Das hier verwendete „x“ steht für den jeweiligen Indexwert des Banners.
Die jeweiligen Anzeige-Positionen der Banner im HTML-Dokument können beliebig gewählt werden. Für die Funktionalität unserer noch folgenden JavaScript-Definitionen ist es jedoch erforderlich, dass wir bereits in HTML die Positionen festlegen:


Code:
 <a href="seiten/seite0.htm" id="link0"><img src="banner/banner0.gif" id="img0" alt="Hier geht's zur Seite 0"></a> 
<a href="seiten/seite1.htm" id="link1"><img src="banner/banner1.gif" id="img1" alt="Hier geht's zur Seite 1"></a> 
<a href="seiten/seite2.htm" id="link2"><img src="banner/banner2.gif" id="img2" alt="Hier geht's zur Seite 2"></a>



In unserem Code-Schnipsel befinden sich alle drei Banner unmittelbar nebeneinander. Dies ist, wie bereits erwähnt, nicht erforderlich. Jede Grafik-Definition erhält, wie auch jede Verlinkung, mittels „Id“-Anweisung einen eindeutigen Namen. Dies ist notwendig, um zu einem späteren Zeitpunkt auf die einzelnen Elemente problemlos zugreifen zu können, um so beispielsweise den Pfad einer Grafik anzupassen.
Damit bei jedem neuen Aufruf des Dokuments die Banner rotieren, übernimmt eine JavaScript-Funktion „rotate“ die Verwaltung der Werbe-Banner:


Code:
 <script language="JavaScript" type="text/javascript"> 
function rotate() { 
    if(document.getElementsByTagName) { 
        var n = new Array(); 
        do  
            for(i = 0 ; i < 3; i++) n[i] = Math.round(Math.random() * 5); 
        while(n[0]==n[1] || n[0]==n[2] || n[1]==n[2]); 
        image = document.getElementsByTagName('img'); 
        link = document.getElementsByTagName('a'); 
 
        for(i = 0; i < 3; i++) { 
            ni = n[i]; 
            image["img" + i].src = "banner/" + banner[ni][0]; 
            image["img" + i].alt = "seiten/" + banner[ni][1]; 
            link["link" + i].href = banner[ni][2]; 
        } 
    } 
} 
</script>


Wir beginnen sofort mit der schwierigsten Anforderung an die Funktion. Damit jede Banner-Anzeige voneinander verschieden ist, d.h. ein Banner aus der Datenbank nicht zwei mal zum selben Zeitpunkt selektiert wird, durchlaufen wir eine „while“-Schleife mit einer entsprechenden Überprüfung. Innerhalb der „while“-Schleife generieren wir drei Zufallszahlen in einem weiteren Array „n“. Damit wir in den Dimensionen unseres Arrays „banner“ bleiben, können die Zahlen jeweils einen Wert zwischen „0“ und „5“ annehmen. Wenn Sie die Anzahl der Banner verändern, müssen Sie folglich stets das Intervall für die Zufallszahlen anpassen. In der Abbruch-Bedingung der „while“-Schleife überprüfen wir nun, ob zwei Elemente des Arrays „n“ den gleichen Wert besitzen.
Sobald wir ausschließlich unterschiedliche Werte in unserem Array „n“ besitzen, müssen wir nur noch den Anzeigepositionen der Werbe-Banner die neuen Informationen für Dateipfad, Tooltip und Verlinkung zukommen lassen. Dies erledigen wir wiederum in einer Schleife nacheinander, für jede der drei Anzeige-Positionen.
Damit unser Script überhaupt ausgeführt wird, bedarf es eines Aufrufes der Funktion „rotate“ nach dem Ladevorgang des Dokuments:


Code:
<body onLoad="rotate();">



Dies übernimmt üblicherweise ein „onLoad“-Event im Body-Tag des HTML-Dokuments.

Beispieldatei herunterladen [download=[URL="http://www.onetwomax.de/newsimg/2004/11/09/thumb_1100025383_Mehrfache_Banner_Rotation.zip"]Mehrfache_Banner-Rotation.zip[/URL]]
 
hallo habe soweit alles eingebaut...

habe mir mal freie Banner zum testen genommen! nun kommen aber ab und an immer Fehler!

kann mir einer schreiben wo sich ein Fehler eingeschlichen hat?

hier der code:

Code:
<script language="JavaScript" type="text/javascript">
banner = new Array();
for(i = 0; i < 6; i++) banner[i] = new Array();

banner[0][0]="http://www.lern-online.net/allgemein/werbemittel/banner.gif";
banner[0][1]="Lern-Online.net - Lernen mit Erfolg";
banner[0][2]="http://www.lern-online.net/";

banner[1][0]="http://www.184c.de/banner/468x60/1.gif";
banner[1][1]="184c";
banner[1][2]="http://www.184c.de";

banner[2][0]="http://www.lern-online.net/allgemein/werbemittel/banner4.gif";
banner[2][1]="lernenonline";
banner[2][2]="http://www.lern-online.net";

banner[3][0]="http://www.esportsnetwork.de/./ebay/banner_468x60_Pixel2.gif";
banner[3][1]="esportsnetwork";
banner[3][2]="http://www.esportsnetwork.de/";
</script>

Code:
<body onLoad="rotate();">

Code:
<div id="left">
 
<table>
  <tr>
    <td><a href="http://www.184c.de" target="_blank" id="link0"><img src="http://www.184c.de/banner/468x60/1.gif" id="img0" alt="184c" border="0"></a></td>
  </tr>
    <td><a href="http://www.lern-online.net/" target="_blank" id="link1"><img src="http://www.lern-online.net/allgemein/werbemittel/banner.gif" id="img1" alt="Lern-Online.net - Lernen mit Erfolg" width="468" height="60" border="0"></a></td>
  </tr>
    <td><a href="http://www.esportsnetwork.de/" target="_blank" id="link2"><img src="http://www.esportsnetwork.de/./ebay/banner_468x60_Pixel2.gif" id="img2" alt="esportsnetwork" width="468" height="60" border="0"></a></td>
  </tr>
</table>

 </div>

Code:
<script language="JavaScript" type="text/javascript">
function rotate() {
    if(document.getElementsByTagName) {
        // Drei ungleiche Zufallszahlen zwischen 0 und 5 bestimmen
        var n = new Array();
        do 
		    for(i = 0 ; i < 3; i++) n[i] = Math.round(Math.random() * 5);
        while(n[0]==n[1] || n[0]==n[2] || n[1]==n[2]);
        image = document.getElementsByTagName('img');
        link = document.getElementsByTagName('a');

        // Dateinamen, Alt-Text und URLs zuordnen
        for(i = 0; i < 3; i++) {
            ni = n[i];
            image["img" + i].src = banner[ni][0];
            image["img" + i].alt = banner[ni][1];
            link["link" + i].href = banner[ni][2];
        }
    }
}
</script>

// EDIT

hab es gefunden!

man muss natürlich auch die anzhal ändern!

Code:
for(i = 0 ; i < 3; i++) n[i] = Math.round(Math.random() * 5);  in 3


nun gehts!
 

Neue Beiträge

Zurück