Saturday, January 20, 2007

Linda's How-Do-I Series? How Do I Add A Banner Rotation To My Website?

I belong to several forums and often see the question, "Does anyone know the script I can use to add a banner rotation to my website or blog?"

So, I decided that instead of answering on the forum every time that I would provide the answer here.

There are two basic type of banner rotations, as follows:

1) Banner Rotation That Changes Every Few Seconds
2) Banner Rotation That Changes With Every Page Load

I prefer the banner rotation that changes every few seconds as it provides the opportunity for every banner to be seen by every customer. The banner rotation that changes with every page load only shows one banner per customer.

Also, I am using the 1st code above on my blogs so I know that it works. I haven't used the 2nd code above as of yet so I can't say with any certainty that it will work and , therefore, won't include it in my blog tips until I have used it.

In order to type the code below so that you could see it as text I had to replace several things. So, please be aware that you will need to change these in order for the code to work.

Shown below is the code for a Banner Rotation That Changes Every 10 Seconds for 2 Banners

<##script type="text/JavaScript"##>
var imgs1 = new Array("http://BANNER1IMAGEURL.jpg",http://BANNER2IMAGEURL.jpg)
var lnks1 = new Array ("http://BANNER1WEBSITEURL",http://BANNER2WEBSITEURL)
var alt1 = new Array("BANNER1ALTTEXT","BANNER2ALTTEXT")
var var currentAd1 = 0
var imgCt1 = 2
function cycle1() {
if (currentAd1 == imgCt1) {
currentAd1 = 0
}
var banner1 = document.getElementById('adBanner1');
var link1 = document.getElementById('adLink1');
banner1.src=imgs1[currentAd1]
banner1.alt=alt1[currentAd1]
document.getElementById('adLink1').href=lnks1[currentAd1]
currentAd1++
}
window.setInterval("cycle1()",10000)
<##/script##>
<##a href=http://BANNER1WEBSITEURL id="adLink1" target="_top">
<##img src="http://BANNER1IMAGEURL.jpg" id="adBanner1" border="0" width="468" height="60"><##/a>

There are three key lines of code for your banners. The first holds the URL of your banner image (see BANNER1IMAGEURL above). The second holds your website URL (see BANNER1WEBSITEURL above). The 3rd holds the alternate text for the banner (see BANNER1ALTTEXT above). Each banner URL and alternate text that you include is separated by a comma.

There are also two important variables for the code. The first is the number of banners in the rotations (see 2 above). The second is the time interval (see 10000 above). If you wanted to have 5 banners in the rotation that would change every 2 seconds then you would change the 3 to a 5 and the and the 10000 to 2000.

Then you need to tell the script what the first banner is. So your would replace the BANNER1WEBSITEURL and BANNER1IMAGEURL in the last two lines of code with your own banner 1 information.

I have found that .jpg banners work best for the code. If your last banner is a .gif type banner the code will not work. Banners that have a .gif extension will only work if they are in-between two .jpg banners.

Also, banners all have to be the same width and height (i.e. 468x60 standard size) and that is indicted in the last line image source line of the code as well ( see width="468" height="60" above).

In order to get the code to print as text you also need to delete all of the ##'s and replace the
first line of code between the <>'s that says script type="text/JavaScript" with script language="Javascript". Minus the ##'s here, too.

I hope this helps everyone who would like to add a banner rotation to their website or blog.

2 comments:

Neenee said...

Linda - I'm a little confused about the alttext....what is that?

Linda said...

Neenee, the "alttext" can be either the name of the website, the byline, etc. It will show up when you scroll over the banner or when there is no image. Hope this helps.

Linda

Post a Comment