Home > Features > Banner Rotation Using JavaScript • Bookmark   • Newsletters   • Register Search Options

FEATURE

Banner Rotation Using JavaScript

Banner Rotation Using JavaScript

October 2, 2001
Text size: 
Get XBIZ News
XBIZ Research
Will virtual reality boost the paysite market?
Yes, it will soon
  39.66%
Yes, but in a few years
  36.87%
No
  23.46%
Out of 179 votes. Results based on votes submitted by members of XBIZ.net social network.

" 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! "

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;

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!


EDUCATIONAL FEATURES

Fraudulent Brazilian Trademark Registrations Running Rampant

Although you might not think often about protecting your trademark rights in Brazil, you need to — even if you don’t yet have a single Brazilian customer. Scammers are constantly looking for... More »

E-Stim Basics: Selling Customers on Powerboxes as Pleasure Tools

Electrosex is a commonly misunderstood pleasure practice for good reason: Most of us have negative associations with electricity; maybe we’ve been shocked after rubbing our feet across a carpeted... More »

Search Oftentimes Is Left to Chance

Adult content is frowned upon in search, whether in paid, organic or social. With the big algo updates from the past few years, Google has cleaned up search, trying to get rid of spammy and low-quality... More »
XBIZ NEWSLETTERS
Stay informed of the latest industry developments. Get XBIZ newsletters delivered to your inbox. Subscribe today!
Enter email address:

* To manage existing subscriptions click here.






POPULAR PRODUCTS & SERVICES
Submit your press release to
multiple news outlets with 1 click.
Subscribe to RSS news feeds or
add free content to your website.
Access XBIZ news and articles
with your mobile device.
Subscribe to XBIZ Premiere magazine, the industry's leading adult retail trade publications, delivering the most timely and comprehensive business news and information to producers and retailers of adult products.

UPCOMING EVENTS

Everything To Do With Sex Show

Jan 27 - Jan 29
Halifax, Nova Scotia

The European Summit

Mar 04 - Mar 07
Barcelona-Sitges, Spain

The TEA Show

Mar 05 - Mar 06
Hollywood, CA

Phoenix Forum 2017

Mar 23 - Mar 26
Tempe, Arizona
Everyday thousands of business professionals browse XBIZ's industry directory for quality products and services. Not listed yet? Your company could be losing potential new business. Submit your company today!
Use XBIZ RSS feeds to stay informed of the latest industry developments or as a content syndication tool for your website!