Changing images using event handlers

When you have visited the pages "Carla's Graphics" or "The WFH Pages" you have seen images appear, disappeare or change when you move the mousecursor over textlinks.

This is how it's done:

First you put an image on your page and give it a name:

     <IMG name="name1" src="pict1.jpg" width=100 height=100 border=1>

             Change !

             Change back !

Now you can change the image, using the OnMouseOver event handler in combination with a link, like this:

     <a href="http://www.oocities.org"
      onMouseOver="document.images['name1'].src='pict2.jpg' "> Change !  </a>

To change it back:

     <a href="http://www.oocities.org"
      onMouseOver="document.images['name1'].src='pict1.jpg' "> Change back !  </a>

The trick to let an image appear or disappear.
You can do this by using a tranparent GIF image:

     <IMG NAME="name2" src="invisible.gif" width=100 height=100 border=1>

             Appear!

             Disappear !

Let your image appear with:

     <a href="http://www.oocities.org"
      onMouseOver="document.images['name2'].src='pict3.jpg' "> Appear !  </a>

And disappear again:

     <a href="http://www.oocities.org"
      onMouseOver="document.images['name2'].src='invisible.jpg' "> Disappear !  </a>

The image name and image filename are marked red in the above examples.
The link and the linktext are in green.

These effects work with Netscape 4+ and Internet Explorer 4+.

The images should have the same size.

You can also use the OnMouseOut event handler in the same way to create these effects when the mousecursor is NOT on the link.

Don't forget to change the width and the height !

These effects are also used with the Rotating Banners !