Move your mouse over her.
Then, click the picture.
To stop, move your mouse
out of the picture.

Have you noticed the difference?

If you haven’t seen the previous page, click the following link: the original presentation of the above GIF Animation. A new 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 the improved presentation, in which you don’t see an unsightly blank gap between pictures displayed on the screen.

The code is as follows:

The original code is as follows:

In the above presentation, June (june091.gif) appears as a background image of the table. So, you actually see a transparent GIF image over her picture. Because spacer.gif is transparent, you cannot see this image, and June appears through this transparent image.

If you place your mouse pointer over the picture in the above presentation, your browser shows that you’re seeing this transparent image as shown below:

In other words, June is always present on this page so that you don’t see an unsightly white gap when a new image takes place of her position as in the original presentation.

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.
  
  
• 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.
  
  

I notice some delay when I click for the GIF animation. Is there any way to speed it up?

Yes, there is still a way to get around. I will explain it in the following page:

How to speed up a Presentation even more

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!