banner rotatie-systeem

[Kloep]

Hallo,

Ik heb een banner rotatie-systeem, alleen ik heb er een probleempje mee. Onderstaande code:

In de HEAD

<script language="javascript" type="text/javascript"> 
 link = new Array() 
 bann = new Array() 
   link[0] = "http://www.gtaforum.nl"; 
   bann[0] = "banner.jpg"; 

 var i = Math.floor(Math.random() * bann.length); 

function showbanner() { 
 if(i < bann.length-1){ 
   i ++;
 } 
 else{ 
   i = 0
 } 
 var samen = "<a href='" + link[i] + "' target='_blank'>" + 
             "<img src='" + bann[i] + "' width='728' height='90' border='0'></a>"; 

 if(document.getElementById) { 
   document.getElementById('banner').innerHTML = samen; 
 } 

 else if(document.all) { 
   document.all[banner].innerHTML=samen; 
 } 

 setTimeout('showbanner()',15000); 
} 

window.onload = showbanner ();
</script>

In de BODY:

<center><script language="javascript" type="text/javascript"> 

document.write("<a href='" + link[i] + "' target='_blank'>" + 
              "<img src='" + bann[i] + "' width='728' height='90' border='0'></a>"); 

</script></center>

Wat het probleem nu is, is dat dit op elke pagina zo ingevuld moet worden. Nu bestaat mijn website nog niet uit heel veel pagina's, maar dit zullen er heel wat meer gaan worden. Ik heb dus weinig zin om bij elke nieuwe banner alle pagina's aan te gaan passen.

Is er dus een mogelijkheid om een aparte pagina aan te maken, waarin dan in de HEAD naartoe wordt verwezen, zodat ik maar 1 pagina hoef te vervangen?

Alvast bedankt.

[marcootje]

Je kunt dat script dat nu in de head staat in een apart .js-bestand zetten en dat includen met <script>, dus extern in plaats van intern. Het script komt dan (zonder html-tags) in het .js-bestand, en in de head komt:

<script type="text/javascript" src="hetbestand.js"></script>

Dan hoef je alleen de .js-code te bewerken.

Je krijgt hier overigens wel een klein detail bij waarmee je op moet letten: het .js-bestand wordt later geladen dan de .html, waardoor je geen document.write meer kan gebruiken. Je zult dus met document.getElementById() moeten gebruiken, of een meer geavanceerde functie. Hoe je dit het beste kunt aanpakken, is afhankelijk van de website.

Een goede manier zou zijn om een class="" te reserveren voor de banners, bijvoorbeeld een div.banner. Je vraagt dan al deze divs op als de pagina geladen is (window.onload), en je vult deze met de banners. Je kunt ook met id werken (div#banner), als je op 1 pagina maar 1 banner hebt.

Overigens, als je php hebt kan dit ook minder omslachtig .

Edit: Kijk eerst een of je er uit komt met het js-bestand, misschien is de rest niet eens nodig. Heb je een online voorbeeld? Ik heb het idee dat dit niet het volledige script is.

Edit2: na wat doorlezen zie ik heel wat foutjes in de code. Als je wilt kan ik er een keertje door walzen en wat foutjes uithalen? Maar eerst kijken in hoeverre je het werkend krijgt.

Bewerkt: 22 maart 2010 door marcootje

[Kloep]

Hier staat het nu online. Het zou de bedoeling moeten zijn dat het er net zoals hier uit komt te zien, zo had ik het namelijk eerst. Er zijn 4 verschillende afbeeldingen met elk een andere kleur.

Dacht dat het niet werkte, maar was de HTML-tags vergeten uit het .js bestand te halen. Zo te zien lijkt het te werken. Mijn server ondersteund overigens PHP, dus kan het hier makkelijker mee?

Bewerkt: 22 maart 2010 door Kloep

[marcootje]

Ik zag een klein detail in het script over het hoofd, vandaar die opmerking over php. Zoals het nu is is de simpelste oplossing.

Merk wel op dat de bedoeling van het script op dit moment in ieder geval niet in firefox werkt, en ik denk ik wel meer browsers niet.

Even een afkraak-lijstje :

- sommige statements worden niet afgesloten met ;

- in de document.write worden variabelen gebruikt die nog niet bestaan volgens mij. Hier zou je problemen mee kunnen krijgen.

- er bestaat maar één div#banner, terwijl je twee banners hebt. Echter je kunt volgens de regels maar 1 van dezelfde id hebben, dus je zult met banner1, banner2, banner3, etc. moeten werken, of classes

- bij window.onload moet er een referentie worden doorgegeven, geen return-value van een functie, dus zo moet het (denk ik):

window.onload = showbanner;

- document.all[banner]: variabele banner bestaat niet. of eigenlijk, dit moet 'banner' zijn, met haakjes.

( - het language-attribuut van <script> is oud)

( - in html gebruik ik altijd " en geen '. Ik weet niet of " nog voordelen heeft boven ', maar volgens mij is het wel een ongeschreven regel)

Als het naar wens werkt, dan is dat mooi. Als het niet werkt zijn bovenstaande punten zeker de aandacht waard. Het script is namelijk geschreven om elke 15 seconden een andere banner te laten zien (zonder refresh), wat het nu niet doet. (firebug zegt dat het id 'banner' nergens gevonden kan worden).

Heb je dit script zelf geschreven of niet?

Bewerkt: 22 maart 2010 door marcootje

[Kloep]

Even een afkraak-lijstje :

Prima.

- sommige statements worden niet afgesloten met ;

Heb je gelijk in, maar het script werkt in Firefox, Google Chrome en Internet Explorer naar behoren. Heb dus weinig zin om ermee te gaan kloten.

- er bestaat maar één div#banner, terwijl je twee banners hebt. Echter je kunt volgens de regels maar 1 van dezelfde id hebben, dus je zult met banner1, banner2, banner3, etc. moeten werken, of classes

Die div was een foutje, en hoorde daar helemaal niet. Deze is dan ook verwijderd.

- bij window.onload moet er een referentie worden doorgegeven, geen return-value van een functie, dus zo moet het (denk ik):

window.onload = showbanner;

Hmm, zou kunnen. Beide versies werken, dus op het moment heb ik geen zin om er naar te kijken.

( - het language-attribuut van <script> is oud)

De SCRIPT-tag heb ik weggehaald in de.JS file.

( - in html gebruik ik altijd " en geen '. Ik weet niet of " nog voordelen heeft boven ', maar volgens mij is het wel een ongeschreven regel)

Er zijn geen voor- en/of nadelen tussen de ' en de ''. Ik gebruik eigenlijk meestal ', omdat dat makkelijker typen is. Scheelt niet veel, maar toch wat. De enige toegevoegde waarde van ' en '', is dat je hiermee zo'n regel in een andere regel kan doen. (Misschien beetje een slechte uitleg, maar ik denk dat je het toch wel weet. )

Heb je dit script zelf geschreven of niet?

Nee, klik.