Banner.js

Per S

3.00/5 (4 votes)

Oct 9, 2003

87920

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.