Ultra fast cheap  linux and windows hosting
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