Web Hosting Offers
See the new scripts recently added to Dynamic Drive. Click here.
Original, practical CSS codes and examples such as CSS menus for your site.
javascript tutorial Browse Basic JavaScript Tutorial
Browse JavaScript Script resources
Browse javascript FAQS
Categories:

javascript tutorial
buy template
Home >> Tutorials >> Advanced javascript tutorials
AdRotator(For Advertisements):

This is useful when you want to have an Ad Banner to switch between advertisements in a round-robin fashion. When you click on the Advertisement, it will take you to the  corresponding website.

Eg: In the following example, there are 3 advertisements(this is only an example). See how it works !


Complete Source Code is given below. To use it, all you have to do is :
<1> Insert the source code given below into your HTML file between your <body> and </body> tags

<2> Decide how many Advertisements you may have and change the following line accordingly:
var AdTotals= 3;

You may want to change the delay between Ads by changing the following line:
var AdDelay= 5000;

<3> Change the following lines in the code. Use your image files and destination URL's.
AdsArray[1]= new AddImage("1200","50","imagefile1.gif","http://www.yourlink1.com/","0")

AdsArray[2]= new AddImage("1200","50","imagefile2.gif","http://www.yourlink2.com/","0")

AdsArray[3]= new AddImage("1200","50","imagefile3.gif","http://www.yourlink3.com/","0")

<4> Change the following line. imgSRC="../logo.gif" to imgSRC="imagefile1.gif" (your first image in the array)

<a href="javascript:JumpToAd();"><imgSRC="../logo.gif" WIDTH=300 HEIGHT=50 NAME="AdBanner" BORDER=0> </a>

Good Luck !



Complete Source Code:

<FORM>

<head>

<script language = "Javascript">

//CurrentImage is the current selected Image
var CurrentImage="";

//AdURL is the current selected Advertisement URL

var AdURL="";

//AdIndex is the current selected Advertisement

var AdIndex=1;

//AdTotals is the total number of Ads

var AdTotals= 3;

//AdDelay is the delay between Ads in milliseconds

var AdDelay= 5000;

AdsArray =new Array()

//This functionadds an image object to the array 'AdsArray'
function AddImage(w,h,s,l,b){

 this.width= w

 this.height= h

 this.src= s

 this.href= l

 this.border= b

}

//Rotate ads by first updating the AdIndex
function RotateAds(){

 AdIndex= AdIndex + 1;

 if (AdIndex> AdTotals) AdIndex=1;

 AdURL=AdsArray[AdIndex].href;

 CurrentImage=AdsArray[AdIndex].src;

 document.AdBanner.src= CurrentImage;

 document.AdBanner.width= AdsArray[AdIndex].width;

 document.AdBanner.height= AdsArray[AdIndex].height;

 window.setTimeout('RotateAds();',AdDelay);

}

//Go to URL behind the current displayed Advertisement
function JumpToAd(){

  window.location= AdURL;

}

 

AdsArray[1]= new AddImage("1200","50","../logo.gif","http://www.webgimmicks.com/","0")
AdsArray[2]= new AddImage("1200","50","../amazonlogo.gif","http://www.amazon.com/","0")

AdsArray[3]= new AddImage("1200","50","../banner.gif","http://www.webgimmicks.com/","0")

</script>

</head>
<body onLoad="window.setTimeout('RotateAds();',5000);">

<center>

<a href="javascript:JumpToAd();"><imgSRC="../logo.gif" WIDTH=300 HEIGHT=50 NAME="AdBanner" BORDER=0> </a>

</center>

<br>&nbsp;

<br>&nbsp;

</body>

<FORM>



 

Page contents: itechies.net - AdRotator
javascript tutorial
javascript book
Buy this book