Wednesday,
10th Mar 2010

[javascript]

Rotating Banner Script

The above rotating banner is very easy to achieve. It can even be used with images of differing sizes, but looks more professional if the images are kept to the same size.

First, cut and paste the following script in-between the <head> and </head> tags of your page:

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
  <!--
  //JavaScript Rotating Banners
  //copyright daxassist, 2000-2004
  //visit http://www.daxassist.com for this and other javascripts with full tutorials.

  //specify interval between rotating banners (in mili seconds)
  var currentlink = 0;
  var currentimage = 0;
  var delay = 2000;
  var newbrowser = true;
	
  //specify banners
  if(document.images) {
    banpics = new Array();	
    banpics[0] = new Image();
    banpics[0].src = "http://www.yourdomain.com/banners/banner01.jpg";
    banpics[1] = new Image();
    banpics[1].src = "http://www.yourdomain.com/banners/banner02.jpg";
    banpics[2] = new Image();
    banpics[2].src = "http://www.yourdomain.com/banners/banner03.jpg";
    banpics[3] = new Image();
    banpics[3].src = "http://www.yourdomain.com/banners/banner04.jpg";
    banpics[4] = new Image();
    banpics[4].src = "http://www.yourdomain.com/banners/banner05.jpg";
    banpics[5] = new Image();
    banpics[5].src = "http://www.yourdomain.com/banners/banner06.jpg";
		
    //specify banner links
    banlinks = new Array();	
    banlinks[0] = "http://www.domainaddress1.com";
    banlinks[1] = "http://www.domainaddress2.com";
    banlinks[2] = "http://www.domainaddress3.com";
    banlinks[3] = "http://www.domainaddress4.com";
    banlinks[4] = "http://www.domainaddress5.com";
    banlinks[5] = "http://www.domainaddress6.com";
		
  }		
			
  function bannerchanger(from) {
    if(document.images) {
      document.images[from].src = banpics[currentimage].src;
      currentlink = currentimage;			
      if (currentimage < banpics.length-1) 
        currentimage = currentimage + 1;
      else 
        currentimage = 0;
      setTimeout("bannerchanger('" + from + "')", delay);
    }
  }
	
  function FollowLink() {
    if(document.images) {
      if (newbrowser == true) {
        window.open(banlinks[currentlink], 'newwindow', '', false);			
      } else
        document.location.href = banlinks[currentlink];
    }
  }
	
  //-->
</script>

I like to keep all my banner images in a directory called 'banners' - this helps to keep my sites organised and it makes it easier to find and change graphics if I need to. I make all my banners the same size and then upload them to my banners directory..

If you look at the code above, you will see the first part of the script has the comment //specify banners. Below that you will see a list of banner images - each one represented by a number in the script. There are two lines to each image:.

banpics[0] = new Image();
banpics[0].src = "http://www.daxassist.com/banners/rotban1.gif";

0 is allocated to the first image. The second image is given the number 1 and the code looks like this:

banpics[1] = new Image();
banpics[1].src = "http://www.daxassist.com/banners/rotban2.gif";

You can have as many banners as you wish but each one must have it's own two lines of code as above and it's own unique number following in sequence to the banner preceding them.

You also need to put the full URL to the location of the image. If you are using images from another site or server, you need to point to the directory that the image is stored in. Often, when sharing banners, people allow you to link to the banner on their site to save your own bandwidth. If this is the case, they should give you the full URL to where their banner is located on their server.

The second part of the script has the comment //specify banners links.. This is where you put the link URL to each respective banner. The link must have the same number [0] or [1] as it's image counterpart. It must also be the full URL - even if it is linking to another page on your own site.

You can adjust the speed that the banners rotate by altering the delay variable at the beginning of the script. It is currently set to 2000. If you increase the number, the banners rotate slower and decreasing the number will cause the banners to rotate quicker.

There is another variable just below the delay variable called newbrowser. When set to true;, any link activated by the banners will open in a new browser. If you want the pages to open in the same browser, change this variable to false;.

Then add the following line to your body tag to initiate the rotation when the page loads:
<body onload="bannerchanger('banner');">

Finally, in your page, you add an image tag at the point you want the banners to display with an anchor tag around it something like this:

Use the first banner image of your rotation to start the ball rolling. If you don't want your rotating banners to be links, simply remove the anchor from around the banner image tag and they will then become simple rotating images.

And that's all there is to it!