Rotating Banner for your website with HTML and JavaScript

What is Rotating Banner?

Web banners play an immense part in today's advertising methods. While browsing in the web, you can see advertising banners that is cycling through a number of images each of them linking to specific target pages. Let us see the code to create such a rotating web banner to be used in your website and bit of understanding about the code.

I am using Dreamweaver as my HTML editor software. You can use any available editors of your choice.

• Create a new HTML file and my editor automatically provides the very basic tags embedded within the file.
• Create a top section on your web page for the banner to be displayed using <div> tag 

<div>
  <a href="_blank"><img src ="images/Chrysanthemum.jpg" height="200" width="1345"  id="banner"/>
   </a>
</div>

My first image on the rotating banner is "Chrysanthemum.jpg" placed in images folder with id attribute for <img> tag as "banner".

•  Now enter into the JavaScript code within the script tags.

<script language="javascript" type="text/javascript">
</script>

• We write a rotate() function to flip through the images with a tiny time gap. Create a variable "ad" and initialise it to "0" outside the function.

function rotate()
 {
     var images = new Array ("images/Chrysanthemum.jpg", "images/Desert.jpg", "images/Hydrangeas.jpg");
     ad++;
     if (ad == images.length)
      {
        ad = 0; 
      }
     document.getElementById("banner").src = images [ad] ;
     setTimeout(rotate, 2000);
 }

Within the function a new array called images is created with the image files. The setTimeout function is used to call the rotate() function every 2000 milliseconds. Each time the function is called the "ad" value will be incremented and the "src" attribute of the banner element will be substituted with image from the images array with index as the current "ad" value.

• We need to add links to each image with a function named newlocation().

function newlocation ()
 {
     var url = new Array ("http://www.google.com","http://www.yahoo.com","http://www.bing.com");
     document.location.href = url [ad];
     return false;
 }

Within this function a new array called url is created with the links to each image. The entire URL of the document is substituted with link from the url array with index as the current ad value.

• Its time to call the functions now as below.

 document.getElementById("banner").parentNode.onclick = newlocation;
 rotate();

Whenever an image is clicked the newlocation() function is called with the help of onclick event and rotate() function is called directly. This is the basic code for rotating banner and you can add any style to your banner with the help of CSS.

Download code here