|
Easy Animated Banners with Java Script
By Stephen Bucaro
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.
<img alt="free ebooks!" border=0 width=468 height=60 name="myBanner" src="frame1.gif" onClick="window.location.href='targetpage1.htm'">
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.
<body onLoad="animateBanner()">
| 
Free Downloads
RSS Feed