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!
