This tutorial is not intended to teach you JavaScript or HTML. Rather it is to show you how to convert an ordinary dull rollover into an Animated Rollover. It assumes you have some knowledge of computers and how to create and browse directories. The HTML in this document is the MINIMUM required to get Animated Rollovers working. This means it does not conform to any HTML standards. You should consult a book on HTML to determine what the minimum ACCEPTABLE requirements for an HTML document are. The HTML has been kept to a minimum so we can demonstrate what extra HTML and JavaScript is required to create Animated Rollovers.

Lets start with a basic HTML file that has a single image

Open notepad and cut and paste this text into it and save it as index.html in a new folder called c:\testhtml. You should now have the file c:\testhtml\index.html

Next, right click on the following image and choose save as.

Save the image as home_off.gif, in a new folder under c:\testhtml called images. You should now have a file
c:\testhtml\images\home_off.gif

Test the file by double clicking on index.html or by using file-open on your WEB browser and then browse your file system until you find c:\testhtml\index.html

It should look something like this :- example 1

We now have our basic file, lets build on it.

First, lets create a normal rollover. To do this we first need an image that will be displayed when the mouse is over the image. Right click on the following image and choose save as.

Save the image as c:\testhtml\images\home_on.gif.

Next we need to add the code to swap the image. This code is placed inside an Anchor TAG <A> and looks like this

This says onMouseOver change the document image named 'home' to 'images/home_on.gif and onMouseOut change the document image named 'home' to 'images/home_off.gif. For this to work we need to name the image in the document. We do this by giving the image a NAME attribute.

Notice in the text in the previous code example the line; "Anything placed here......". Well if we place our image here then our image will be the link and as the code will execute when the mouse moves over the link (which is the image), we will see the image swap onMouseOver of the image. The complete HTML should look like this.

Cut and paste this into notepad and save as c:\testhtml\index.html.Test it out.

It should look something like this :- example 2

Try and create a second rollover using the following images.


 

Ok, now lets animate the image. In order to create animated rollovers we need multiple images. Each image will represent 1 frame of the animation. Each frame is held in a folder that matches the name of the animation. So for our home button example we create a folder called home in the images folder.
"c:\testhtml\images\home\".
We will put our animation frames for home in this folder.

Right click on each of the images below and save in the folder
c:\testhtml\images\home\n.gif
where n is the frame number (0-4)

The first thing we are going to have to do is include some JavaScript to create an animated image object. We do this by including the JSFX_AnimatedRollovers.js library. If you have not already done so, download demo2.zip, and unzip it. Next, create another folder called javascript and copy the file JSFX_AnimatedRollovers.js into it. You should now have the file c:\testhtml\javascript\JSFX_AnimatedRollovers.js.

To include the functions in this file into your document you need the following tag.

Also, It would appreciated if you would put the following just above the SCRIPT tag.

It is a comment which explains who wrote the library. JavaScript-FX have worked hard on this and all scripts here script and would like to receive some credit for it.

Next we need to write some code to turn an ordinary document.image into an animated image. Using the "home" image as an example we would write the following.

NOTE: we used the same name as the name given in the <IMG> TAG.

Now we need to change the onMouseOver/Out code to animate the "home" image. We do this by using the functions JSFX.aniOn() and JSFX.aniOff().

Notice how similar this is the the original rollover code.

Again, if we place our image between the anchor tags then the image will control the animation. NOTE. The image SRC here will be the first frame of the animation and so the HTML will look like

Putting it all together, we should have a file that looks like this.

Cut and paste this into notepad and save as c:\testhtml\index.html. Test it out. (Make sure you have put JSFX_AnimatedRollovers.js in the correct folder)

It should look something like this :- example 3

To add a second animated image (say for links) you only need add the line

and add animation frames in images/links/*.gif

Try it with the following images

You now should have enough information to define your own Animated Rollovers. Try looking at the source code of some of the demo pages and see if you can identify the different components.

Try experimenting with different animations. You will probably need a good animation program in order to either create your own animations or to take an animated gif and turn it into an Animated Rollover. There should be some free ones out on the WEB.