Banner.js





3.00/5 (4 votes)
Oct 9, 2003

87896
An object oriented approach for displaying banners.
Introduction
I was looking for a JavaScript banner solution that allows me to run banners on my web, when I discovered the BarelyFitz JavaScript slideshow. It's the best slideshow script I've seen, and I decided to use if for my banners.
Inheritance
The easiest method to "borrow" somebody else's code, is through inheritance. Using Nicholas C. Zakas's technique makes inheritance in JavaScript a dream:
Object.prototype.extend = function (oSuper) {
for (sProperty in oSuper) {
this[sProperty] = oSuper[sProperty];
}
}
function ClassA () {
}
function ClassB() {
this.extend(new ClassA());
}
The Banner Class
The reason I wrote this banner
class, was to be able to have two (or more) banners on one page. The banner
class acts as a wrapper around the slideshow
class and inherits slideshow
's methods and properties.
You'll find a demo here.
Prerequisite
BarelyFitz JavaScript slideshow.js.
The code
<HEAD>
<SCRIPT type="text/javascript" src="slideshow.js"></SCRIPT>
<SCRIPT language="JavaScript1.3" type="text/javascript">
<!--//
// From "Rethinking JavaScript Objects"
// makes it easy to inherit/extend an object
Object.prototype.extend = function (oSuper) {
for (sProperty in oSuper) {
this[sProperty] = oSuper[sProperty];
}
}
// Banner(), a slideshow wrapper
// syntax:
// var oVar = new Banner("oVar",url|urlarry [,target])
// Note: oVar must be the same as the first parameter to Banner - "oVar"
// the third parameter - target - is optional
// see sample use
function Banner (id,url) {
//inherit methods and properties from slideshow()
this.extend(new slideshow());
//set inherited property 'name', required ref slideshow documentation
this.name = id;
//set target if defined
if (arguments[2])
this.target = arguments[2];
else
this.target = '_self';
// images(), local method that adds images to the object
this.images = function() {
for(i=0;i<arguments.length;i++){
// Create a slide
s = new slide();
s.src = arguments[i];
if (typeof(url) == 'string')
s.link = url;
else
s.link = url[i];
s.target = this.target;
// inherited method, see slideshow documentation
this.add_slide(s);
}
}
}
// create the first banner object, all images points to the same location
var firstBanner = new Banner("firstBanner","http://soderlind.no/","_blank");
// create the second banner object, each image points to a different location
var arrURLs = new Array(
"http://www.codeproject.com"
,"http://soderlind.no/"
,"http://syndicated.INFO/"
);
var secondBanner = new Banner("secondBanner",arrURLs,"_blank");
// onload, init the banner objects and start them
function initBanner() {
if (document.images) {
//
// firstBanner
//
firstBanner.images(
"http://soderlind.no/images/soderlind468x60.gif"
,"http://soderlind.no/images/soderlind468x60-black.gif"
);
// image, timeout, update() and play() are inherited,
// see slideshow documentation
firstBanner.image = document.images.BANNER1;
firstBanner.timeout = 5000;
firstBanner.update();
firstBanner.play();
//
// secondBanner
//
secondBanner.images(
"http://www.codeproject.com/images/codeproject468x60.gif"
,"http://soderlind.no/images/soderlind468x60.gif"
,"http://syndicated.info/i/gfx/logo.gif"
);
secondBanner.image = document.images.BANNER2;
secondBanner.timeout = 7000;
secondBanner.update();
secondBanner.play();
}
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="initBanner();">
<!-- firstBanner.hotlink() is inherited, see slideshow documentation -->
<A href="javascript:void(0)" onClick="firstBanner.hotlink();return false;">
<IMG name="BANNER1" src="http://soderlind.no/images/soderlind468x60.gif"
width="468" height="60" border="0">
</A>
<A href="javascript:void(0)" onClick="secondBanner.hotlink();return false;">
<IMG name="BANNER2"
src="http://www.codeproject.com/images/codeproject468x60.gif"
width="468" height="60" border="0">
</A>
</BODY>
Have fun coding.