D

[jerseygoat]

I found a javascript that is supposed to work for rotating images, allowing you to specify the time, size, and link. But i'm having trouble using it. I'm trying to use it several times over in different spaces of a table. Is this possible? Can anyone take a look at it and help me out. Thank you so much.

It came with 3 files. A .css a .js and a readme file.

This is the readme file (below this i will paste the .css and then the .js)

HOW TO USE THE BANNER IN YOUR HTML PAGE
---------------------------------------

STEP 1:
Copy files mBanner.js, mBanner.css

STEP 2:
Create a folder with name "banners"
(For the current example
place 10 images and 5 swf files in this folder
and rename them as
1.jpg, 2.jpg,...., 10.jpg,
10.swf, 11.swf,..., 14.swf)

STEP 1:
Include STYLE SHEET file for Banner

<link rel="StyleSheet" href="mBanner.css" type="text/css" />

STEP 2:
Include JAVASCRIPT file for Banner

<script type="text/javascript" src="mBanner.js"></script>

STEP 3:
Copy and modify the code for banner


<script language="javascript">
// SPECIFY THE NAME OF BANNER HERE
// REMEMBER THAT NAME OF VARIABLE AND ARGUMENT PASSED SHOULD BE SAME
// HERE IT IS 'banner1'
banner1 = new Banner('banner1');

// ADD THE BANNER HERE
// FIRST ARGUMENT : "FLASH" OR "IMAGE"
// SECONG ARGUMENT: PATH OF THE FILE
// THIRD ARGUMENT : DURATION IN SECONDS
// FOURTH ARGUMENT : HEIGHT
// FIFTH ARGUMENT : WIDTH
// SISTH ARGUMENT: HYPERLINK
banner1.add("FLASH", "banners/10.swf", 15, 100, 500,"mBanner.htm");
banner1.add("FLASH", "banners/11.swf", 7, 100, 500,"");
banner1.add("IMAGE", "banners/12.jpg", 9, 100, 500,"manish.htm");
banner1.add("FLASH", "banners/13.swf", 7, 100, 500,"");
banner1.add("IMAGE", "banners/14.gif", 9, 100, 500,"http://www.google.com");

// START THE BANNER
document.write(banner1);
banner1.start();
</script>

This is the .css file

.m_banner_hide{
display:none;
}
.m_banner_show{
display:block;
}

This is the .js file

/////////////////////////////////
// File Name: mBanner.js //
// By: Manish Kumar Namdeo //
/////////////////////////////////

// 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="clsid:D27CDB6E-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";
}

 

[manishnamdeo]

Rotating Banner

I think you want to have multiple banners on same page. Yes, this script supports this..

you will have to give different names for each banner:

banner1 = new Banner('banner1');
banner2 = new Banner('banner2');
banner3 = new Banner('banner3');

Add respective images/flash to these banner objects...

Write the following line where you want to place those banners

document.write(banner1);
document.write(banner2);
document.write(banner3);

Then finally start them:
banner1.start();
banner2.start();
banner3.start();

-
Manish Kumar Namdeo
www.thecomforts.com