banner rotator script

Status
Niet open voor verdere reacties.

cleanshot

Gebruiker
Lid geworden
5 sep 2007
Berichten
6
Ik ben op zoek naar een bannerscript.js waarmee ik op een pagina drie verschillende banner kan beheren. De banners verschillen van groote en het is de bedoeling dat ik via dat ene script dus alle banners kan configureren.
Ik heb nu dit script en dat werkt erg goed voor een banner
Code:
/*---------------------------
1) add into your <head>:
 
<script language="javascript" src="bannerscript.js"></script>

<style>
<!--
#bannerAd{visibility:visible;}
-->
</style>
 
-----------------------------*/

/*----------------------------
2) add this code into your webpage where you want the banner ad to be displayed:

<!-- Banner Ad code -->
<div id="bannerAd">
<script language="JavaScript">
<!-- 
document.write(myCode)
// -->
</script>
</div>
<!-- End Banner Ad-->

-----------------------------*/

//-3) time between switching the ad, in milliseconds -\\
var refreshTime = 11000; //- 5000 ms = 5 seconds -\\

//-4) number of ads to rotate -\\
var numAds = 2;

function makeAd() {
	this.width = ''
	this.height = ''
	this.src = ''
	this.href = ''
	this.mouseover = ''
	}

var ads = new Array()
for(var i = 1; i <= numAds; i++) { ads[i] = new makeAd() }

//- 5) Copy and paste the lines between the banner definition for 
//each banner you want to rotate and be sure to change numAds to 
//the number of banners (look about 15 lines up for numAds)
i = 1;


/*------------begin banner definition----------*/
ads[i].width = "135"                           //width of image
ads[i].height = "100"                           //height of image
ads[i].src = "images/#1.gif"  			       //image url
ads[i].href = "http://www.google.nl"           	       //link url
ads[i].mouseover = ""            //text to display when mouse moves over banner
ads[i].sponsor = ""                     //text to display for text link under banner
i++
/*-------------end banner definition-----------*/


ads[i].width = "135"    
ads[i].height = "100"                  
ads[i].src = "images/#2.gif"  			
ads[i].href = "http://www.travelinfozeeland.com"           	 
ads[i].mouseover = ""       
ads[i].sponsor = ""                 
i++


var myCode = '';
do {
var n= Math.floor(Math.random() * (numAds + 1) + 1);
} while(n > numAds);
var current_ad = n;
myCode = getCode(n);

function getCode(adNumber){
	var tempCode = ""
	tempCode += ('<a href="'+ ads[adNumber].href +'" \n')
	tempCode += ('onMouseOver="status=\''+ ads[adNumber].mouseover +'\';return true" \n')
	tempCode += ('onMouseOut="status=\'\'"> \n')
	tempCode += ('<img src="' + ads[adNumber].src + '" width=' + ads[adNumber].width)
	tempCode += (' onLoad="setTimeout(\'newAd();\',' + refreshTime + ');"')
	tempCode += ('\n height=' + ads[adNumber].height + ' border=0 >')
	
	tempCode += ('</a>')
	return tempCode;
	}

function newAd(){
	current_ad++;
	if (current_ad > numAds)
		current_ad = 1;
	if (document.all){
	   write(getCode(current_ad));
	   }
}

function write(text){
	if (document.layers) {
		document.bannerAd.document.write(text)
		document.bannerAd.document.close();
		}
	else
		if (document.all)
			document.all.bannerAd.innerHTML = text

het is de bedoeling dat ik een banner kan toevoegen en die in een andere layer kan plaatsen. de layers/banners staan dus los van elkaar.

Wie O wie kan mij hiermee helpen.
 
Laatst bewerkt door een moderator:
Is er niemand die een bannerscript.js bestand kent waarmee je banners in in verschillende layers kunt weergeven en aanpassen?:o
 
Dit zelfde script gebruiken.
Alleen herschrijven voor de variabelen welke gebruikt worden.
Dus
<div id="bannerAd">
wordt dan
<div id="bannerAd2">
en wel het hele script doorlopen om dit aan te passen.

:cool:
 
Hey Zeeuwen :)

Wanneer niemand anders een antwoord geeft voor vanavond, schrijf ik wel een Object Georienteerde oplossing. Die is dan makkelijker te implementeren ook denk ik.
Probeer nog even een zo goed mogelijke omschrijving te maken over het effect dat je uiteindelijk wil hebben. Wat ik nu versta is:

Je wil met een enkel script op drie 'plaatsen op je website' banners automatisch laten 'roteren'. Elke plaats heeft zijn eigen formaat.

IE: Boven roteren grote rechthoekige banners, Onder langwerpige kleine, Rechts vierkante kleine banners.
 
Laatst bewerkt:
Hoi JP, wat jij beschrijft is precies wat ik bedoel. ik wil via een file alle banners kunnen configureren op verschillende plaatsen met verschillende grootes en banners. Zelf ben ik vrij nieuw op dit gebied en ik zou het daarom erg tof vinden als een van jullie mij een voorbeeld van de code zou kunnnen laten zien.

Bijvoorbeeld de code van het bannerscript zelf met de drie verschillende banners.
de code die dan in het <head> gedeelte komt en de drie codes die ik op de plaats van de banners moet plakken.
Alvast heel veel dank :)
Hey Zeeuwen :)

Wanneer niemand anders een antwoord geeft voor vanavond, schrijf ik wel een Object Georienteerde oplossing. Die is dan makkelijker te implementeren ook denk ik.
Probeer nog even een zo goed mogelijke omschrijving te maken over het effect dat je uiteindelijk wil hebben. Wat ik nu versta is:

Je wil met een enkel script op drie 'plaatsen op je website' banners automatisch laten 'roteren'. Elke plaats heeft zijn eigen formaat.

IE: Boven roteren grote rechthoekige banners, Onder langwerpige kleine, Rechts vierkante kleine banners.
 
Hey cleanshot,

zoals je gemerkt heb had ik van het weekend weinig tijd. Ik heb het script een eind af, maar de formule die bepaalt of een plaatje in de bannerruimte past moet ik nog verzinnen. Dat is best lastig. Maar het komt goed.

Groeten,
Jaap
 
:thumb:In ieder geval heel erg bedankt dat je deze moeite voor me wil doen dat waardeer ik erg! Ik zou je bijna uitnodigen om eens een lekker koppie koffie te komen drinken en mij met wat andere zaken van mijn website te helpen:thumb:.
Hey cleanshot,

zoals je gemerkt heb had ik van het weekend weinig tijd. Ik heb het script een eind af, maar de formule die bepaalt of een plaatje in de bannerruimte past moet ik nog verzinnen. Dat is best lastig. Maar het komt goed.

Groeten,
Jaap
 
http://jaapromijn.nl/BannerRotator/

Ik heb het niet al te grondig getest nog, maar het principe is dit:

1 - Je importeert de BannerRotator.js in je HTML

HTML:
<script type='text/javascript' src='script/BannerRotator.js'></script>

(Het js bestand bevat wat custom functies en de initiator functie die een BannerRotator object aanmaakt en de plaatjes toevoegt, die kan je eigenlijk beter uit het BannerRotator.js halen en in een apart javascript bestand.)

2 - Vervolgens maak je in je pagina DIV-elementen aan die zullen dienen als bannerruimte. De enige werkelijke vereisten zijn dat de divs onderdeel zijn van de bannerRotator klasse (class) en dat de div 1 plaatje (img) in een anker (a) bevat.

HTML:
		<div id='idmagjezelfbepalenhoor' class='bannerRotator'>
			<a><img src='standaard_banner.jpg' /></a>
		</div>

3 - Dan moet je de bannerruimtes nog van breedte en hoogte voorzien in je CSS

HTML:
		#idmagjezelfbepalenhoor {
height: 100px;
width: 600px; }

4 - Vervolgens upload je plaatjes die dienst zullen doen als banners.

5 - Daarna voeg je de 'banners' toe door in het javascript de plaatjes toe te voegen in de volgende syntax. Ook te zien in mijn voorbeeld.

HTML:
    bannerRotator.addPlaatje({src:'<hier komt de link naar het plaatje>',alt:<de alternatieve tekst voor bijv. blinden of tekstbrowsers> ',jref:'<de link naar de adverteerder>'});


bannerRotator.addPlaatje({src:'images/banner7.jpg',alt:'Reclame: Een foto van de stormvloedkering',jref:'http://www.jaapromijn.nl/BannerRotator/#kering'});

(De banners worden alleen in bannerruimtes geladen wanneer de afmetingen van de afbeelding overeenkomen met de ruimte. Er is een mogelijkheid om met de variabele INSCHIKKELIJKHEID het percentage dat een plaatje kleiner mag zijn dan de ruimte aan te geven. Standaard staat die op 10%, een banner mag dan dus niet meer dan 10% kleiner zijn dan de ruimte. (in een ruimte van 100px bij 100px worden plaatjes van 89 bij 89 -of kleiner- niet ingeladen. Een plaatje van 100 bij 89 dus ook niet!!) Plaatjes mogen wel groter zijn dan de ruimte als ze in verhouding wel hetzelfde zijn als de ruimte en dus geschaald kunnen worden. Een plaatje van 700 bij 117 kan ingeladen worden in een ruimte van 600 bij 100.)


5 - de BANNER_WISSEL_INTERVAL is het aantal secondes dat tussen het wisselen van de banners zit. Deze heb ik op 5 gezet, maar kan je natuurlijk zelf instellen.


Ik denk dat het hier mee zou moeten lukken. Ik hoop dat je er wat aan hebt. Zo niet kan ik het zelf altijd nog wel eens gebruiken :P Wanneer iets niet lukt, laat het dan weten.
 
Laatst bewerkt:
Misschien een beetje vreemde vraag, maar waar kan ik het .js bestand vinden? of is het de bedoeling dat ik de code in mijn banner.js bestand kopieer. zo ja mis ik dan niet wat:o
 
Ja, eigenlijk een vreemde vraag, want de -relatieve- link naar het javascript bestand staat in mijn post en in de HTML ;)

HTML:
<script type='text/javascript' src='script/BannerRotator.js'></script>

Dus script/BannerRotator.js wordt op mijn site:


http://jaapromijn.nl/BannerRotator/script/BannerRotator.js

Dus de html verwijst naar een map genaamd 'script' en dan naar BannerRotator.js

Verder moeten de plaatjes in een map genaamd 'images' staan.

Succes ermee!
 
Beste JP Ik ben vrij nieuw op het gebied van codes en ik heb toch nog wat hulp nodig.

Allereerst stop ik het bannerscript.js bestand in mijn website. ( in de zelfde map war ook de index.html in zit)

Daarna voeg ik de <script type='text/javascript' src='script/BannerRotator.js'></script> in het <head> gedeelte van de pagina waarop ik de banner wil laten zien.

Op die pagina maak ik drie Div layers aan met elk een eigen groote

In de layers plak ik deze code
<div id='idmagjezelfbepalenhoor' class='bannerRotator'>
<a><img src='standaard_banner.jpg' /></a>
</div>
Daar zet ik een standaard plaatje in
: <div id='idmagjezelfbepalenhoor' class='bannerRotator'>
<a><img src='standaard_banner #1.jpg' /></a>
</div>

Dan maak ik een map aan waar mijn banners in komen te staan en stop de banners erin

Dan ga ik naar het bannerscript.js bestand en plaats mijn eigen banner op de plaats van jou banner:

Orrigineel
bannerRotator.addPlaatje({src:'images/banner1.jpg',alt:'Reclame: close-up van mosselen',jref:'http://www.jaapromijn.nl/BannerRotator/#mosselen'});

Eigen banner
bannerRotator.addPlaatje({src:'images/kleine banner #1.jpg',alt:'Reclame: close-up van mosselen',jref:'http://www.jaapromijn.nl/BannerRotator/#mosselen'});

en dan gebeurt er niks op de pagina waar de banners zouden moeten staan?!

Hoe kan in het .js bestand zien in welke layers welke banners komen

op je eigen pagina staat netjes div layer klein middel en groot, maar ik kan dit niet terugvinden in het .js bestand

Zou je het misschien nog een keer stap voor stap kunnen uitleggen zodat iemand die wienig verstand van deze codes heeft het goed kan begrijpen want ik kom er nog niet uit.
 
Beste JP Ik ben vrij nieuw op het gebied van codes en ik heb toch nog wat hulp nodig.

Oke. Lees eerst de hele post alvorens veranderingen door te voeren.

Allereerst stop ik het bannerscript.js bestand in mijn website. ( in de zelfde map war ook de index.html in zit)

Maak in dezelfde map waar ook je index.html zit een map 'script' en stop daar de js in.

Daarna voeg ik de <script type='text/javascript' src='script/BannerRotator.js'></script> in het <head> gedeelte van de pagina waarop ik de banner wil laten zien.

Dit is goed.

Op die pagina maak ik drie Div layers aan met elk een eigen groote

In die html-code die ik je gaf waren de div layers de divs waar ik over sprak. Je hoeft dus de DIVS die ik gepost had als voorbeeld niet apart nog eens in DIV-layers te zetten. (Al maakt het niet zoveel uit)


In de layers plak ik deze code
<div id='idmagjezelfbepalenhoor' class='bannerRotator'>
<a><img src='standaard_banner.jpg' /></a>
</div>
Daar zet ik een standaard plaatje in
: <div id='idmagjezelfbepalenhoor' class='bannerRotator'>
<a><img src='standaard_banner #1.jpg' /></a>
</div>

Je kan dus gewoon deze div-layers gebruiken. Denk er wel aan dat de id-attribute nu hetzelfde zijn, dat mag niet, maak de IDs uniek of laat ze weg.


Dan maak ik een map aan waar mijn banners in komen te staan en stop de banners erin

Ja, noem die map wel 'images' (zie volgende stap).


Dan ga ik naar het bannerscript.js bestand en plaats mijn eigen banner op de plaats van jou banner:

Orrigineel
bannerRotator.addPlaatje({src:'images/banner1.jpg',alt:'Reclame: close-up van mosselen',jref:'http://www.jaapromijn.nl/BannerRotator/#mosselen'});

Eigen banner
bannerRotator.addPlaatje({src:'images/kleine banner #1.jpg',alt:'Reclame: close-up van mosselen',jref:'http://www.jaapromijn.nl/BannerRotator/#mosselen'});

en dan gebeurt er niks op de pagina waar de banners zouden moeten staan?!

Staan de plaatjes in de images map, je verwijst namelijk in src via images/ dat de plaatjes in de images-map staan.
Ik weet trouwens niet of het zo een goed idee is om spaties en # te gebruiken in de bestandsnaam van je plaatjes.


Hoe kan in het .js bestand zien in welke layers welke banners komen

Dat kan je niet zien in het script. Dat rekent het script uit. Wanneer je de plaatjes even groot maakt als de ruimte waar je ze wil hebben komen ze daar automatisch (en willekeurig) te voorschijn.


op je eigen pagina staat netjes div layer klein middel en groot, maar ik kan dit niet terugvinden in het .js bestand

Dat komt omdat ik de ID niet gebruik voor het script maar enkel voor CSS. Het script kijkt zelf of een plaatje in de banner-ruimte past.

Zou je het misschien nog een keer stap voor stap kunnen uitleggen zodat iemand die wienig verstand van deze codes heeft het goed kan begrijpen want ik kom er nog niet uit.

Probeer deze uitleg te volgen, wanneer dat niet helpt zou je misschien een link kunnen laten zien waar je het script geïmplementeerd hebt, dan zou ik de fouten eruit kunnen halen (+ feedback zodat je het in het vervolg makkelijk zelf kan gebruiken)
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.

Nieuwste berichten

Terug
Bovenaan Onderaan