Move your mouse over her face.
Then, click her head.
To stop, move your mouse
out of her head.

Have you noticed the difference?

If you haven’t seen the previous page, click the following link: the slightly improved presentation of the above GIF Animation. A new window will open up.

This is the original presentation of the above GIF Animation. Another window will open up.

If you have a fast broadband link, you might not notice this difference. But if you are on a modem connection, you can clearly see a much faster presentation, in which you don’t see a big delay when you click for the GIF animation.

The above picture consists of three parts as shown below:

The code is as follows:

For comparison, I’ll show below the codes for the previous two versions:

The code for the slightly improved presentation is as follows:

The original code is as follows:

The core code of the above presentation

As in the slightly improved presentation, the above presentation uses a background image of June’s face (june099x.gif) as shown at right.

This is done by style sheet specification as shown in the above code. Here, I don’t have much space to explain how to use CSS (Cascading Style Sheet). To learn more about CSS, you can visit this page: CSS Table of Contents.

When you move your mouse over June’s face at above-right, your browser replaces the current picture (spacer.gif), which is actually a bloated 1-pixel-by-1 transparent image, with her funny face (june092b.gif) as shown at right.

When you click her face, your browser replaces the current picture with the GIF animation.

And when you move your mouse out of her face, your browser replaces the current image with the spacer.gif so that the background image of June will show through the transparent image.

This is much faster than repainting her face because the size of spacer.gif is only 67 bytes.

For more information, please visit the following pages:

• If you don’t know how to use an IMG tag, please visit this page: How to Use an IMG Tag.
  
  
• For the TABLE Tag, please visit this page: How to Use a TABLE Tag.
  
  
• For more on colspan, please visit this page: ROWSPAN & COLSPAN Made Easy!
  
  
• Do you know the difference between SPAN and DIV?
  To get the answers, please visit this page: Do you really know the difference between <SPAN> and <DIV>?
  
  
• When you want to know more about an event handler such as onMouseOver, vist this page: How to Use an Event Handler
  
  
• If you wonder what those double dots are, please visit this page: What the heck is this double-dot?
  
  
• For more on the spacer, please visit this page: What is a SPACER tag?
  
  
• If you want to know the void() method, please visit the previous page: How to Present a GIF Animation.
  
  

Wanna review the previous pages?

• How to Present a GIF Animation
  
  
• How to speed up a Presentation
  
  

Related Links

• Javascript Table of Contents
  
  
• How to Present a GIF animation
  
  
• How to Create a Transparent GIF Image
  
  
• Optimize Your Animation!
  
  
• Javascript Animation with Some Tricks
  
  
• How To Handle Multiple GIF Animation Presentation
  
  
• Dramatize your Pictures with Event Handlers!