Tutorial

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 onMouseOvers working. This means it does not conform to any HTML standards. You should read a book on HTML to determine what the minimum ACCEPTABLE requirements for a HTML document are. I have kept the HTML to a minimum so I can demonstrate what extra HTML and JavaScript is required to create Animated onMouseOvers.

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

<HTML>
    <HEAD>
        <TITLE>Animated Image</TITLE>
    </HEAD>
    <BODY>
        <IMG SRC="images/home_off.gif">
    </BODY>
</HTML>

Open notepad and cut and paste this text into it and save it as index.html in a new directory 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 directory 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


<A HREF="index.html"
    onMouseOver="document.images['home'].src='images/home_on.gif'"
    onMouseOut="document.images['home'].src='images/home_off.gif'">
Anything placed here will be a link to index.html
</A>

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.


<IMG SRC="images/home_off.gif" NAME="home">

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.


<HTML>
    <HEAD>
        <TITLE>Animated Image</TITLE>
    </HEAD>

    <BODY>
        <A HREF="index.html"
         onMouseOver="document.images['home'].src='images/home_on.gif'"
         onMouseOut="document.images['home'].src='images/home_off.gif'">
                <IMG SRC="images/home_off.gif" NAME="home">
        </A>
    </BODY>
</HTML>
 

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 directory that matches the name of the animation. So for our home button example we create a directory called home in the images directory.
"c:\testhtml\images\home\".
We will put our animation frames for home in this directory.

Right click on each of the images below and save in the directory
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 animate2.js library. If you have not already done so, download animate.zip, and unzip it. Next, create another sub-directory called javascript and copy the file animate2.js into it. You should now have the file c:\testhtml\javascript\animate2.js.

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


<SCRIPT LANGUAGE="javascript" SRC="javascript/animate2.js" TYPE="text/javascript">
</SCRIPT>

Also, I would appreciate it if you would put the following just above the SCRIPT tag.


<!-- *** Animated onMouseOver by Roy Whittle. www.Roy.Whittle.com Roy@Whittle.com *** -->

It is a comment which explains who wrote the library. I have worked hard on this 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.


<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
    AnimatedGif("home", 5);
//-->
</SCRIPT>

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 turn_on() and turn_off().


<A HREF="index.html"
    onMouseOver="turn_on('home')"
    onMouseOut="turn_off('home')">
Anything placed here will be a link to index.html
</A>

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


    <IMG SRC="images/home/0.gif" NAME="home">

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


<HTML>
    <HEAD>
        <TITLE>Animated Image</TITLE>
    </HEAD>

    <BODY>
<!-- *** Animated onMouseOver by Roy Whittle. www.Roy.Whittle.com Roy@Whittle.com *** -->
<SCRIPT LANGUAGE="javascript" SRC="javascript/animate2.js" TYPE="text/javascript">
</SCRIPT>
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
    AnimatedGif("home", 5);
//-->
</SCRIPT>

        <A HREF="index.html"
            onMouseOver="turn_on('home')"
            onMouseOut="turn_off('home')">
                <IMG SRC="images/home/0.gif" NAME="home">
        </A>
    </BODY>
</HTML>
 

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

It should look something like this :- example 3


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


AnimatedGif("links", 5);

after the line

AnimatedGif("home", 5);

and add the following HTML/JavaScript

        <A HREF="index.html"
            onMouseOver="turn_on('links')"
            onMouseOut="turn_off('links')">
                <IMG SRC="images/links/0.gif" NAME="links">
        </A>

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 onMouseOvers. Try looking at the source code for some of the gadgets/gizmo 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 onMouseOver. There should be some free ones out on the WEB but I currently use Paint Shop Pro's Animation Shop.

I will try to extend this tutorial to demonstrate how some of the more advanced functions work as I get the time.