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

The code is as follows:

The above code uses two HTML tags—an anchor (<A HREF= ...> </A>) tag and an IMG tag. If you don’t know how to use an IMG tag, please visit this page: How to Use an IMG Tag.

When you move your mouse over the picture, . . .

When you move your mouse over the picture, an event handler (onMouseOver) will replace the current picture with the following image (june092.jpg):

This is done by the following code:

  onMouseOver="document.myGal.src=
        '../eroshist/images/june092.gif'"

When you move your mouse out of the picture, . . .

When you move your mouse out of the picture, an event handler (onMouseOut) will replace the current picture with the following image (june091.jpg):

This is done by the following code:

  onMouseOut="document.myGal.src=
        '../eroshist/images/june091.gif'"

The display area at the top of this page is coded as:

document.myGal.src

The document means this page. The myGal is the name given to the picture defined by the IMG tag. And the src stands for “source”.

Therefore, the above code will instruct your browser so that

when you move your mouse out of the picture, your browser will replace the display area defined by document.myGal.src with the picture stored originally in the memory (../eroshist/images/june091.gif) of the hard disk at the remote site.

When you click the picture, . . .

<a href="javascript:void(document.myGal.src=
        '../eroshist/images/juneache.gif');"

The href attribute of the anchor tag will instruct your browser to execute javascript void() method, which will evaluate its parameter or invoke the statement if it is an instruction.

In this case, your browser will simply replace the current picture with the GIF animation (juneache.gif).

For more information on the void() method, please visit this page: I am a chimp in love with you, but have a problem to fix with void(0).

If you want to know more about event handlers, please visit 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?

Unfortunately, the above presentation is slow because of the size of each picture. There is a way to get around. I will explain it in the following page:

How to Speed Up a Presentation

A new window will pop up.

How did you create a transparent GIF image in the first place?

I will explain it in the next page. Click the following link:

How to Create a Transparent GIF Image

Related Links

• Optimize Your Animation!
  
  
• How to Use an IMG Tag
  
  
• Javascript Animation with Some Tricks
  
  
• How To Handle Multiple GIF Animation Presentation
  
  
• Dramatize your Pictures with Event Handlers!