Easy Animated Banners with Java Script

Animated banners are usually animated gif images. But there are several problems with animated gifs. First, they consist of several gif images compiled into a single file. To make any changes to the banner you must retrieve the original images and recompile the animated gif. Second, you must use .gif images, you can't use .jpg images. And third, the entire animated gif file must be downloaded before any animation can begin.

In this article, I will show you how to use Java Script to create an animated banner. Using Java Script allows you to edit or replace images in the animation sequence, and change the amount of time each image is displayed without doing any recompiling.

The first thing you need to create any animated banner is the sequence of images of which the animation will be composed. For this example, I use four images that create an animated banner advertising free ebooks on this Web site.

Create a Java Script code block in the head of your Web page that preloads your images as shown below.

<script language="JavaScript">
var image1 = new Image;
var image2 = new Image;
var image3 = new Image;
var image4 = new Image;
image1.src = "frame1.gif";
image2.src = "frame2.gif";
image3.src = "frame3.gif";
image4.src = "frame4.gif";
</script>

Inside that same code block, define three variables as shown below.

var frame =
new Array(image1,image2,image3,image4);
var numframes = frame.length;
var curframe = 0;

The variable frame places all the images in an array. The variable numframes recieves the number of images in the array. The variable curframe will contain the array index of the currently displayed image.

The image tag below is placed within the body of the web page to display the banner.

There are two important attributes of this image tag to note. First, the image html element is given the name myBanner. This is the name we will use to refer to it in the Java Script code. Second, when the user clicks on the banner image, the new page targetpage1.htm is loaded into the browser window.

The Java Script function shown below performs the banner animation. This code is added to the Java Script code block in the head of your Web page.

function animateBanner()
{
   curframe++;
   if(curframe == numframes) curframe = 0;
   document.myBanner.src = frame[curframe].src;
   setTimeout("animateBanner()",1200);  
}

The line curframe++ increments the value in curframe, the array index, by one. The next line checks to see if the index is the same as the number of images, if it is, curframe is reset to 0. The next line loads an image from the frame array into the banner image, replacing the previous image. The last line sets up a timer that will call the function again in 1200 milliseconds.

The only thing left to do is call the animateBanner function from the onLoad event in the body tag of your Web page, as shown below.

The entire code for the banner animation is shown below, along with an example of the animation.

<html>
<head>

<script language="JavaScript">

var image1 = new Image;
var image2 = new Image;
var image3 = new Image;
var image4 = new Image;
image1.src = "frame1.gif";
image2.src = "frame2.gif";
image3.src = "frame3.gif";
image4.src = "frame4.gif";

var frame = new Array(image1,image2,image3,image4);
var numframes = frame.length;
var curframe = 0;

function animateBanner()
{
   curframe++;
   if(curframe == numframes) curframe = 0;
   document.myBanner.src = frame[curframe].src;
   setTimeout("animateBanner()",1200);  
}

</script>

</head>
<body onLoad="animateBanner()">
<img alt="free ebooks!" border=0 width=468 height=60 name="myBanner"
  src="frame1.gif" onClick="window.location.href='targetpage1.htm'">
</body>
</html>

You might want to have more control over how long each image in the animation is displayed. For that, you can add another array containing the time delay for each image, as shown below.

var delay = new Array(500,2500,500,2500);

Then modify the setTimeout line in the animateBanner function to use the time delays in the array, as shown below.

setTimeout("animateBanner()",delay[curframe]);

The code with this modification is shown below, along with an example of the animation.

<html>
<head>

<script language="JavaScript">

var image1 = new Image;
var image2 = new Image;
var image3 = new Image;
var image4 = new Image;
image1.src = "frame1.gif";
image2.src = "frame2.gif";
image3.src = "frame3.gif";
image4.src = "frame4.gif";

var frame = new Array(image1,image2,image3,image4);
var delay = new Array(500,2500,500,2500);
var numframes = frame.length;
var curframe = 0;

function animateBanner()
{
   if(document.myBanner.complete)
   {
      curframe++;
      if(curframe == numframes) curframe = 0;
      document.myBanner.src = frame[curframe].src;
      setTimeout("animateBanner()",delay[curframe]);
   }  
}

</script>

</head>
<body onLoad="animateBanner()">
<img alt="free ebooks!" border=0 width=468 height=60 name="myBanner"
  src="frame1.gif" onClick="window.location.href='targetpage.htm'">
</body>
</html>

You may want to use the banner in multiple web pages on your web site. In that case you can put the Java Script code block in a separate file, without the <script language="JavaScript"> and </script> tags, and then include it in each Web page using the line shown below.

If you create several Java Script animated banners, you may want your web page to rotate through them. To this you would first need to create a Web page as described above for each banner. Then you would load the page into a frame as shown below.

Then you would add the following code block in the head of your Web page. This code is very similar to the code used to display the banner images, except here you are displaying web pages inside an IFRAME.

<script language="JavaScript">

var bannerPage = 
new Array("banner1.htm","banner2.htm")
var numBanners = bannerPage.length;
var curBanner = 0;

function rotateBanner()
{
   curBanner++;
   if(curBanner == numBanners) curBanner = 0;
   banner.location.href = bannerPage[curBanner]; 
   setTimeout("rotateBanner()",10000);  
}
</script>

The paths to the banner web pages are assigned to an array in the code above. If you look back, you will see that I named the IFRAME banner. Note the third line inside the rotateBanner function assigns one of the paths from the array to the location object of that IFRAME.

The only thing left to do is call the rotateBanner function from the onLoad event in the body tag of your Web page, as shown below.

For the second banner in my example, I used a marquee banner. The code for the banner rotation is shown below, along with an example.

<html>
<head>

<script language="JavaScript">

var bannerPage = new Array("banner1.htm","banner2.htm")
var numBanners = bannerPage.length;
var curBanner = 0;

function rotateBanner()
{
   curBanner++;
   if(curBanner == numBanners) curBanner = 0;
   banner.location.href=bannerPage[curBanner]; 
   setTimeout("rotateBanner()",10000);  
}


</head>
<body onLoad="rotateBanner()">
<iframe name="banner" frameborder=0 marginwidth=0 marginheight=0
  width=468 height=60 scrolling="no" src="banner1.htm">
</body>
</html>

Here is an idea of something real annoying that could do. On a banner page, you could load a background sound. You could either use the bgsound html tag, or you could use the embed tag as shown below.

The code above, placed in the body of a Web page will download the sound file message.au and play it one time. You could use this to play a message like "pay attention to this banner" each time your banner displays. Wouldn't that be annoying!?

Sound files are large and slow to load. But with all the annoying in-your face advertising today, I wounder why nobody has though of it yet. Maybe its because we haven't found a big enough jerk yet. No that can't be it.

For your convenience I have zipped together all the images and Web pages for this example, which you can download by clicking here

Learn more at amazon.com

More Java Script Code:
• Java Script Message Boxes
• Slide Show with Different Size Images
• Easy Slide Show Code
• HTML5 Canvas JavaScript Code to a Draw Bezier Curve
• Binary Subtraction with Example JavaScript Code
• Code for Java Script Cube / Box Volume Calculator
• How to Shuffle the Deck With Java Script
• HTML5 Canvas Drag-and-Drop
• Using the Java Script Array Object
• JavaScript Code for Binary to Hexadecimal - Hexadecimal to Binary Conversion