Tutorial

You have seen in the first tutorial how to turn ordinary rollovers into Animated Rollovers. In this tutorial I will show you how to reuse an animation for several mouse overs and thus reduce the amount of images required.

Here is the effect we are aiming for. Run your cursor over the following images.

There are 16 frames of animation for each mouse over. If we were to do this the normal way there would be 16 frames x 5 buttons = 80 images!!! Read on to learn how to reduce this to just 19 images.


Lets start with a basic HTML file that defines 3 animated rollovers.

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

        <!-- *** Animated onMouseOver by www.Roy.Whittle.com Roy@Whittle.com *** -->
        <SCRIPT LANGUAGE="javascript" SRC="javascript/animate2.js" TYPE="text/javascript">

        <SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
        <!--
            AnimatedGif("home", 16);
            AnimatedGif("links", 16);
            AnimatedGif("scripts", 16);
        //-->
        </SCRIPT>
    </HEAD>

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

This defines 3 vertical buttons. Each button has 16 frames of animation and as there are 3 buttons that's 3x16=48 images that need to be downloaded to the browser in order to view the animation's. If we add another button then we add 16 more images. To define just 5 buttons would require 5x16 = 80 images!!! At this point you have 3 options.

  1. Reduce the number of frames in the animation
  2. Make the images small in size (so the file size is small)
  3. Reuse the same animation for each button.

To reuse the animation we use the fact that browsers allow you to define background images in tables. You can have a background image for the whole table or you can have a background image in a table cell. We are going to use the table cell technique.

Here is the HTML for a normal table

Verticle Table Horizontal Table
<TABLE>
<TR>
    <TD>This is cell 1</TD>
</TR>
<TR>
    <TD>This is cell 2</TD>
</TR>
<TR>
    <TD>This is cell 3</TD>
</TR>
</TABLE>
<TABLE>
    <TD>This is cell 1</TD>
    <TD>This is cell 2</TD>
    <TD>This is cell 3</TD>
</TABLE>

This defines a table with 1 column and 3 rows. To make each cell have its own background image the HTML looks like this

<TABLE>
<TR>
    <TD BACKGROUND="images/image1.gif">This is cell 1</TD>
</TR>
<TR>
    <TD BACKGROUND="images/image2.jpg">This is cell 2</TD>
</TR>
<TR>
    <TD BACKGROUND="images/image3.png">This is cell 3</TD>
</TR>
</TABLE>

You can use any format of image for a <TD BACKGROUND=""> that you can for an <IMG SRC=""> tag.

Now an image in a table background will tile (repeat vertically and horizontally) to fill the whole width and height of the table cell. Obviously we don't want this to happen because all we want to see in the table cell is the rollover button.

We do this by making sure the cell is only as wide and as high as 1 button and we do this by putting a transparent gif image in the cell. The image can be totally blank but it doesn't have to be. You just have to make sure there are blank areas in the gif to allow the background image to show through. The HTML for this type of table looks like this.

<TABLE>
<TR>
    <TD BACKGROUND="images/home.gif"><IMG SRC="images/blank.gif"></TD>
</TR>
<TR>
    <TD BACKGROUND="images/links.jpg">IMG SRC="images/blank.gif"</TD>
</TR>
<TR>
    <TD BACKGROUND="images/scripts.gif"><IMG SRC="images/blank.gif"></TD>
</TR>
</TABLE>

Using the following images


we can construct the following table


Now, this might seem strange. Using 4 images to construct 3 buttons. However it makes sense because now we have our static table we can animate just the foreground image and all the buttons will have the same animation (you can even use this method to save on normal image flips).


Now we know the HTML to define the table for the images, here is how you create the JavaScript to reuse the same animation.

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

<!-- *** Animated onMouseOver by Roy Whittle. www.Roy.Whittle.com Roy@Whittle.com *** -->
<SCRIPT LANGUAGE="javascript" SRC="javascript/animate2.js" TYPE="text/javascript">
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
  AnimationFrames("anim9", 16, ".gif");
 
  AnimatedImage("home", "anim9");
  AnimatedImage("links", "anim9");
  AnimatedImage("scripts", "anim9");
//-->
</SCRIPT>
</HEAD>

 

The online manual fully describes each of these functions. The AnimationFrames() function call creates a JavaScript object to hold the 16 frames of animation. The next 3 lines create 3 AnimatedImage() objects that use the AnimationFrames. The first parameter of the function is the name of the IMG in the document where the animation is to be displayed. The second parameter is the name of the animation to play for that Image. There is nothing stopping you from creating 2 AnimationFrames objects and creating half the AnimatedImage objects to use one animation and the other half to use the second animation.


The final part of the tutorial is to put the mouse over code into the table. The easiest way to show you this is to show the before and after of the table cell. Here is the before:-

<TR>
    <TD BACKGROUND="images/home.gif"><IMG SRC="images/blank.gif"></TD>
</TR>

and here is the after:-

<TR>
    <TD BACKGROUND="images/home.gif"><A HREF="home.html"
            onMouseOver="turn_on('home')"
            onMouseOut="turn_off('home')">
<IMG NAME="home"
                  SRC="images/anim9/0.gif"></A></TD>
</TR>

If you have read the first tutorial you should recognize the code that causes the animation to turn on and turn off. The extra in this code is the <TD> and </TD> tags at the start and end of the Anchor (<A></A>) tags and the IMG points to the first frame of the animation as there is no "home" animation. A second row using the same animation would look like this:-

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

Notice how the names of the background image and the foreground image have changed but the SRC="" of the <IMG> points to the same image. This is because we are now sharing the same animation for all buttons.


OK that's it for now. Now it is up to you and your imagination to come up with some eyecatching animated rollovers. If you want some ideas then view the examples page.

If you have any comments/questions about this tutorial please put them in the guest book (available from the home page). I am more likely to answer questions posted there than in individual emails as the answer can be shared by other visitors.

Home




There are visitors who have read this tutorial since 2000-08-27.