Little help on Rotating banner script

ozeire · #1 (**permalink**) 09-13-06, 05:47 AM

Hey guys

Can one of you wonderful Java Script programmers give me a hand.

I have a rotating banner script. It works fine only thing is it opens the webpage of the banner in the same window. Is there any way to edit the script to open it into a new window? Below are the 2 scripts

Hope I have given enough info and someone can help

Thanking you all in advance for you time and help

Regards

Alan

Quote:

lowerbanner.js

Code:

 <!--

banner1 = new Banner('banner1');
banner1.add("IMAGE", "banner/travel10.jpg", 10, 100, 468,"http://www.sydneyontheweb.com/essential_info/ticket_options.shtml");
banner1.add("IMAGE", "banner/itoi.jpg", 10, 100, 468,"http://www.ozeire.com/ccount/click.php?id=78");
banner1.add("IMAGE", "banner/travel.gif", 10, 100, 468,"http://www.ozeire.com/ccount/click.php?id=68");

document.write(banner1);
banner1.start();

Quote:

espebanner.js

Code:

// BANNER OBJECT
function Banner(objName){
this.obj = objName;
this.aNodes = [];
this.currentBanner = 0;

};

// ADD NEW BANNER
Banner.prototype.add = function(bannerType, bannerPath, bannerDuration, height, width, hyperlink) {
this.aNodes[this.aNodes.length] = new Node(this.obj +"_"+ this.aNodes.length, bannerType, bannerPath, bannerDuration, height, width, hyperlink);
};

// Node object
function Node(name, bannerType, bannerPath, bannerDuration, height, width, hyperlink) {
this.name = name;
this.bannerType = bannerType;
this.bannerPath = bannerPath;
this.bannerDuration = bannerDuration;
this.height = height
this.width = width;
this.hyperlink= hyperlink;
// alert (name +"|" + bannerType +"|" + bannerPath +"|" + bannerDuration +"|" + height +"|" + width + "|" + hyperlink);
};

// Outputs the banner to the page
Banner.prototype.toString = function() {
var str = ""
for (var iCtr=0; iCtr < this.aNodes.length; iCtr++){
str = str + '<span name="'+this.aNodes[iCtr].name+'" '
str = str + 'id="'+this.aNodes[iCtr].name+'" ';
str = str + 'class="m_banner_hide" ';
str = str + 'bgcolor="#FFFCDA" '; // CHANGE BANNER COLOR HERE
str = str + 'align="center" ';
str = str + 'valign="top" >\n';
if (this.aNodes[iCtr].hyperlink != ""){
str = str + '<a href="'+this.aNodes[iCtr].hyperlink+'">';
}

if ( this.aNodes[iCtr].bannerType == "FLASH" ){
str = str + '<OBJECT '
str = str + 'classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" '
str = str + 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" '
str = str + 'WIDTH="'+this.aNodes[iCtr].width+'" '
str = str + 'HEIGHT="'+this.aNodes[iCtr].height+'" '
str = str + 'id="bnr_'+this.aNodes[iCtr].name+'" '
str = str + 'ALIGN="" '
str = str + 'VIEWASTEXT>'
str = str + '<PARAM NAME=movie VALUE="'+ this.aNodes[iCtr].bannerPath + '">'
str = str + '<PARAM NAME=quality VALUE=high>'
str = str + '<PARAM NAME=bgcolor VALUE=#FFFCDA>'
str = str + '<EMBED ';
str = str + 'src="'+this.aNodes[iCtr].bannerPath+'" '
str = str + 'quality=high '
// str = str + 'bgcolor=#FFFCDA '
str = str + 'WIDTH="'+this.aNodes[iCtr].width+'" '
str = str + 'HEIGHT="'+this.aNodes[iCtr].height+'" '
str = str + 'NAME="bnr_'+this.aNodes[iCtr].name+'" '
str = str + 'ALIGN="center" '
str = str + 'TYPE="application/x-shockwave-flash" '
str = str + 'PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">'
str = str + '</EMBED>'
str = str + '</OBJECT>'
}else if ( this.aNodes[iCtr].bannerType == "IMAGE" ){
str = str + '<img src="'+this.aNodes[iCtr].bannerPath+'" ';
str = str + 'border="0" ';
str = str + 'height="'+this.aNodes[iCtr].height+'" ';
str = str + 'width="'+this.aNodes[iCtr].width+'">';
}

if (this.aNodes[iCtr].hyperlink != ""){
str = str + '</a>';
}

str += '</span>';
}
return str;
};

// START THE BANNER ROTATION
Banner.prototype.start = function(){
this.changeBanner();
var thisBannerObj = this.obj;
// CURRENT BANNER IS ALREADY INCREMENTED IN cahngeBanner() FUNCTION
setTimeout(thisBannerObj+".start()", this.aNodes[this.currentBanner].bannerDuration * 1000);
}

// CHANGE BANNER
Banner.prototype.changeBanner = function(){
var thisBanner;
var prevBanner = -1;
if (this.currentBanner < this.aNodes.length ){
thisBanner = this.currentBanner;
if (this.aNodes.length > 1){
if ( thisBanner > 0 ){
prevBanner = thisBanner - 1;
}else{
prevBanner = this.aNodes.length-1;
}
}
if (this.currentBanner < this.aNodes.length - 1){
this.currentBanner = this.currentBanner + 1;
}else{
this.currentBanner = 0;
}
}


if (prevBanner >= 0){
document.getElementById(this.aNodes[prevBanner].name).className = "m_banner_hide";
}
document.getElementById(this.aNodes[thisBanner].name).className = "m_banner_show";
}

Clark_Kent · #2 (**permalink**) 09-13-06, 03:01 PM

Hi ozeire,

I could be wrong because I haven't tested the code below, but these are the modifications i have made to allow a new window to be opened upon clicking an ad...

Code:

<!-- lowerbanner.js -->

banner1 = new Banner('banner1');
banner1.add("IMAGE", "banner/travel10.jpg", 10, 100, 468,"http://www.sydneyontheweb.com/essential_info/ticket_options.shtml", "_blank");
banner1.add("IMAGE", "banner/itoi.jpg", 10, 100, 468,"http://www.ozeire.com/ccount/click.php?id=78", "_blank");
banner1.add("IMAGE", "banner/travel.gif", 10, 100, 468,"http://www.ozeire.com/ccount/click.php?id=68", "_blank");

document.write(banner1);
banner1.start();

Code:

<!-- espebanner.js -->

// BANNER OBJECT
function Banner(objName){
this.obj = objName;
this.aNodes = [];
this.currentBanner = 0;

};

// ADD NEW BANNER
Banner.prototype.add = function(bannerType, bannerPath, bannerDuration, height, width, hyperlink, target) {
this.aNodes[this.aNodes.length] = new Node(this.obj +"_"+ this.aNodes.length, bannerType, bannerPath, bannerDuration, height, width, hyperlink, target);
};

// Node object
function Node(name, bannerType, bannerPath, bannerDuration, height, width, hyperlink, target) {
this.name = name;
this.bannerType = bannerType;
this.bannerPath = bannerPath;
this.bannerDuration = bannerDuration;
this.height = height
this.width = width;
this.hyperlink= hyperlink;
this.target= target;
// alert (name +"|" + bannerType +"|" + bannerPath +"|" + bannerDuration +"|" + height +"|" + width + "|" + hyperlink);
};

// Outputs the banner to the page
Banner.prototype.toString = function() {
var str = ""
for (var iCtr=0; iCtr < this.aNodes.length; iCtr++){
str = str + '<span name="'+this.aNodes[iCtr].name+'" '
str = str + 'id="'+this.aNodes[iCtr].name+'" ';
str = str + 'class="m_banner_hide" ';
str = str + 'bgcolor="#FFFCDA" '; // CHANGE BANNER COLOR HERE
str = str + 'align="center" ';
str = str + 'valign="top" >\n';
if (this.aNodes[iCtr].hyperlink != ""){
str = str + '<a href="'+this.aNodes[iCtr].hyperlink+'" target="'+this.aNodes[iCtr].target+'">';
}

if ( this.aNodes[iCtr].bannerType == "FLASH" ){
str = str + '<OBJECT '
str = str + 'classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" '
str = str + 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" '
str = str + 'WIDTH="'+this.aNodes[iCtr].width+'" '
str = str + 'HEIGHT="'+this.aNodes[iCtr].height+'" '
str = str + 'id="bnr_'+this.aNodes[iCtr].name+'" '
str = str + 'ALIGN="" '
str = str + 'VIEWASTEXT>'
str = str + '<PARAM NAME=movie VALUE="'+ this.aNodes[iCtr].bannerPath + '">'
str = str + '<PARAM NAME=quality VALUE=high>'
str = str + '<PARAM NAME=bgcolor VALUE=#FFFCDA>'
str = str + '<EMBED ';
str = str + 'src="'+this.aNodes[iCtr].bannerPath+'" '
str = str + 'quality=high '
// str = str + 'bgcolor=#FFFCDA '
str = str + 'WIDTH="'+this.aNodes[iCtr].width+'" '
str = str + 'HEIGHT="'+this.aNodes[iCtr].height+'" '
str = str + 'NAME="bnr_'+this.aNodes[iCtr].name+'" '
str = str + 'ALIGN="center" '
str = str + 'TYPE="application/x-shockwave-flash" '
str = str + 'PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">'
str = str + '</EMBED>'
str = str + '</OBJECT>'
}else if ( this.aNodes[iCtr].bannerType == "IMAGE" ){
str = str + '<img src="'+this.aNodes[iCtr].bannerPath+'" ';
str = str + 'border="0" ';
str = str + 'height="'+this.aNodes[iCtr].height+'" ';
str = str + 'width="'+this.aNodes[iCtr].width+'">';
}

if (this.aNodes[iCtr].hyperlink != ""){
str = str + '</a>';
}

str += '</span>';
}
return str;
};

// START THE BANNER ROTATION
Banner.prototype.start = function(){
this.changeBanner();
var thisBannerObj = this.obj;
// CURRENT BANNER IS ALREADY INCREMENTED IN cahngeBanner() FUNCTION
setTimeout(thisBannerObj+".start()", this.aNodes[this.currentBanner].bannerDuration * 1000);
}

// CHANGE BANNER
Banner.prototype.changeBanner = function(){
var thisBanner;
var prevBanner = -1;
if (this.currentBanner < this.aNodes.length ){
thisBanner = this.currentBanner;
if (this.aNodes.length > 1){
if ( thisBanner > 0 ){
prevBanner = thisBanner - 1;
}else{
prevBanner = this.aNodes.length-1;
}
}
if (this.currentBanner < this.aNodes.length - 1){
this.currentBanner = this.currentBanner + 1;
}else{
this.currentBanner = 0;
}
}


if (prevBanner >= 0){
document.getElementById(this.aNodes[prevBanner].name).className = "m_banner_hide";
}
document.getElementById(this.aNodes[thisBanner].name).className = "m_banner_show";
}

The code highlighed in red are my modifications.

Hope this helps,

- CK

ozeire · #3 (**permalink**) 09-14-06, 04:50 AM

Problem Resolved

Thanks to

Clark_Kent

Your the man

Thanx so much , works a dream

Regrads

Alan

sandy76 · #4 (**permalink**) 10-19-09, 11:08 AM

Can this script be used to manually rotate the banners, like giving next and previous below each banner and then based on the click by the user, they can either manually view the banners by clicking the next and previous or automatically view the banners. A good example of this kind is on northjersey.com

Any help would be appreciated

Thanks