1. Home
  2. Computing & Technology
  3. JavaScript

Cycling Ad Banner

Part 2 : Obtain the Script

clr gif
More of this Feature

Sample Add to Your Page

If you haven't already got your cycling banners on the page then you need to do that first. Once you are sure that the banners are rotating correctly we can modify the img1.js script to associate the appropriate links with each image. The code that we need to add is shown in bold with each link being defined immediately before the image it will be associated with:

var imgs = new Array(); var imglinks = new Array();
var imgcnt = 0; var thisimg = 0;
imglinks[imgcnt] = 'http:\/\/www.google.com\/';
imgs[imgcnt++] = 'graphics\/pic1a.gif';
imglinks[imgcnt] = 'http:\/\/www.yahoo.com\/';
imgs[imgcnt++] = 'graphics\/pic2a.gif';
imglinks[imgcnt] = 'http:\/\/search.msn.com\/';
imgs[imgcnt++] = 'graphics\/pic3a.gif';

function rotate() {
if (document.images) {
thisimg++;
if (thisimg >= imgcnt) thisimg = 0;
document.rollimg.src = imgs[thisimg];
setTimeout("rotate();",5000);
}
}
setTimeout("rotate();",10000);

In my example I have linked each of the three images to three different search engines just for the purpose of showing you how the links work. You just need to add an entry with the correct addresses that you want to link immediately in front of each image definition.

The final step is to add the link to your page.

Sample Page | Obtain the Script | Add to Your Page
Explore JavaScript
About.com Special Features

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

Easy ways to connect two computers for networking purposes. More >

  1. Home
  2. Computing & Technology
  3. JavaScript

©2009 About.com, a part of The New York Times Company.

All rights reserved.