educational

Banner Rotation Using JavaScript

Stephen Yagielowicz

One of the most welcome "newbie" applications for JavaScript is as a means of banner rotation. While the more experienced Webmaster may shun such an application in favor of much more robust CGI/Perl, PHP, or other suitable technologies, these are often beyond the newbie's grasp (and budget), and likely not possible with most free hosted Web accounts. Here are three good examples of banner rotation using JavaScript:

BANNER ROTATOR #1
This script shows a random banner or other image along with a hyperlink and text description. This script is easily customizable for your page; simply change the linking urls, image urls, and the link names that you wish to display (be sure the order matches) and ensure that the last one of each type does not contain a comma (,) at the end.

<SCRIPT language="JavaScript">
<!-- BANNER ROTATOR #1

var currentdate = 0;
var core = 0;

This "weighted" rotation script not only displays your banners, but also controls how often they appear, allowing you to display a preferred banner over any others!

function initArray() {

this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this[i] = initArray.arguments[i];
}
}

link = new initArray(
"http://URL 1/",
"http://URL 2/",
"http://URL 3/"
);

image = new initArray(
"http://IMAGE 1.gif",
"http://IMAGE 2.gif",
"http://IMAGE 3.gif"
);

text = new initArray(
"DESCRIPTION 1",
"DESCRIPTION 2",
"DESCRIPTION 3"
);

var currentdate = new Date();
var core = currentdate.getSeconds() % image.length;
var ranlink = link[core];
var ranimage = image[core];
var rantext = text[core];

document.write('<a href=\"' +ranlink+ '\"><img src=\"'+ranimage+'\" border="0" alt=\"'+rantext+'\"></a>');

// BANNER ROTATOR #1 -->
</SCRIPT>

BANNER ROTATOR #2
This hot script will change banner images on the fly, with no need to reload the page! You can also adjust the amount of time that each banner is shown!

Place the following lines inside of your <HEAD></HEAD> tag:

<SCRIPT language="JavaScript">
<!-- BANNER ROTATOR #2
var mfBanners = [
['http://www.URL 1.com', 'http://BANNER 1.gif'],
['http://www.URL 2.com', 'http://BANNER 2.gif'],
['http://www.URL 3.com', 'http://BANNER 3.gif']
];
var mfIe = false;
if( document.all) {
mfIe = true;
}
var mfBannerIndex = 0;
function mfBannerChange() {
var htmlString = '<a target="_blank" href="'+mfBanners[mfBannerIndex][0]+'"> <img border="0" src="'+mfBanners[mfBannerIndex][1]+'"></a>';
if( mfIe) {
document.all.banner.innerHTML = htmlString;
}
else {
document.layers["banner"].document.open();
document.layers["banner"].document.write( htmlString);
document.layers["banner"].document.close();
}
if(mfBannerIndex < mfBanners.length - 1)
mfBannerIndex++;
else
mfBannerIndex = 0;
}
setInterval("mfBannerChange()", 5000);
// BANNER ROTATOR #2 -->
</SCRIPT>

Now put the following lines inside of your <BODY> code:

<DIV id="banner" style="position:absolute; top:300; left:171;"></DIV>

BANNER ROTATOR #3
This "weighted" rotation script not only displays your banners, but also controls how often they appear, allowing you to display a preferred banner over any others!

Place the following lines inside of your <HEAD></HEAD> tag:

<SCRIPT language="JavaScript">
<!-- BANNER ROTATOR #3
function banner(imgSource,url,alt,chance) {
this.imgSource = imgSource;
this.url = url;
this.alt = alt;
this.chance = chance;
}
function dispBanner() {
with (this) document.write("<A HREF=" + url + "><IMG SRC='" + imgSource + "' WIDTH=468 HEIGHT=60 BORDER=0 ALT='" + alt + "'></A>");
}
banner.prototype.dispBanner = dispBanner;
banners = new Array();
banners[0] = new banner("http://www.BANNER 1.jpg",
"http://www.URL 1.net target='_blank'",
"DESCRIPTION 1",
10);
banners[1] = new banner("http://BANNER 2.gif",
"http://www.URL 2.com target='_blank'",
"DESCRIPTION 2",
30);
banners[2] = new banner("http://BANNER 3.gif",
"http://www.URL 3.com target='_blank'",
"DESCRIPTION 3",
20);

///////////////////////////////////////////////////
// banners[x] = new banner(<banner source image>, // <url to link to when the banner is clicked>, // <alt> // <the chance this banner has in which to be randomly selected>);
// To increase the chance of a banner being randomly selected, increase it's corresponding // 'chance' property relative to the other banners.
///////////////////////////////////////////////////

sum_of_all_chances = 0;
for (i = 0; i < banners.length; i++) {
sum_of_all_chances += banners[i].chance;
}
function randomBanner() {
chance_limit = 0;
randomly_selected_chance = Math.round((sum_of_all_chances - 1) * Math.random()) + 1;
for (i = 0; i < banners.length; i++) {
chance_limit += banners[i].chance;
if (randomly_selected_chance <= chance_limit) {
document.write("<A HREF=" + banners[i].url + "><IMG SRC='" + banners[i].imgSource + "' WIDTH=468 HEIGHT=60 BORDER=0 ALT='" + banners[i].alt + "'></A>");
return banners[i];
break;
}
}
}
// BANNER ROTATOR #3 -->
</SCRIPT>

Hopefully one of these JavaScripts will allow you to maximize your advertising effectiveness by presenting a variety of banners to your site's visitors. Measuring which of several banners produces the best results will alow you to tailor your ad approach to your audience. Good Luck!

More Articles

educational

S2S Postbacks: Getting Ad Stats in 1 Place

Juicy Jay ·
opinion

Tips to Master Customer Subscription Retention

Cathy Beardsley ·
opinion

A Primer on How to Integrate Paysite Processing

Jonathan Corona ·
educational

Trademark Ruling a Victory for Adult Products, Services

Marc Randazza ·
profile

Q&A: Rich Girls CEO Cristina Enriches Cam Models

Alejandro Freixes ·
profile

Q&A: LiviaChoice Embraces Grand Camming Destiny

Alejandro Freixes ·
opinion

Refined Protocols Reduce STI Risks for Performers

Eric Paul Leue ·
educational

Camming 101: Establish Boundaries to Keep the Fantasy Alive

Steve Hamilton ·
profile

Nikki Night Forges Cam Model Excellence

Alejandro Freixes ·
educational

Ethical Camming Inspires a Cultural Revolution

Mia Saldarriaga ·
Show More