Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About BTH User Agreement Privacy Site Map Contact News Feeds

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.