Auto Banner Rotator

posted at 12:26:50
By Flipping Heck!

Posted In
Technical

It took me about 3 hours yesterday to find a decent banner rotation script. Most of those available, including the Microsoft Ad Rotator Component (MSWC.AdRotator) only load a new banner when the page is refreshed or reloaded which is no good if you want to show multiple banners per page.

There were a couple of systems available that did the trick but they cost about £150 and I can't justify spending that when I'm able to do it myself, so I bit the bullet and wrote a little something that does the trick. It pulls multiple images into the script from a database, populates an array and then automatically rotates them without having to reload/refresh the page.

The following script goes in the body section of your page and shows two banners side-by-side:

<%
'** Open up the banner table

strSQL="SELECT * FROM TBLBanner WHERE BannerType=1 AND BannerStatus=1"
objRS.Open strSQL, objConn, adOpenKeyset, adLockPessimistic, adCmdText
NumOfBanners=objRS.RecordCount
ArrayCount=0
%>

<table width="100%">

<tr>

<td>

<ilayer id="RightBanner1a">

<layer id="RightBanner1b">

<div id="RightBanner1a">

<div id="RightBanner1c" style="position:relative">

</div>

</div>

</layer>

</ilayer>

</td>

</tr>

</table>

<script language="JavaScript">

var bannerArray = new Array();

var myCount=0;

var myCount2=1;

// Banner Code Assignment

<% for i = 0 to NumOfBanners-1 %>

bannerArray[<%=i%>] = "<A HREF=\"<%=objRS("BannerLink")%>\"><IMG SRC=\"/images/banners/<%=objRS("BannerName")%>\" border=\"0\" width=\"<%=objRS("BannerWidth")%>\" height=\"<%=objRS("BannerHeight")%>\"></A>";

<%
objRS.MoveNext
next %>

bannerRotate();

function bannerRotate() {

if(myCount > bannerArray.length-1){myCount=0;}

// Write out rotation

if (document.all){
// it is IE

document.all.RightBanner1c.innerHTML=bannerArray[myCount];

}

else if (document.layers){ // it is NN

document.layers.RightBanner1a.document.layers.RightBanner1b.document.open();

document.layers.RightBanner1a.document.layers.RightBanner1b.document.write(bannerArray[myCount]);

document.layers.RightBanner1a.document.layers.RightBanner1b.document.close();

}

setTimeout("bannerRotate()", 7000);

myCount++;

myCount2++;

}

</script>

<%

objRS.Close

%><

To Adjust the speed of the rotation, change the timeout value, the higher the value the slower the rotation

Sorry to those technophobes out there but I needed to put this script somewhere I can find it again!

If you liked this, you may also like

Like this article? Add it to: