Jamie's JavaScript IMG SRC Flipper

This one is easy, but it requires Netscape 3.0. Internet Explorer 3.0 and Netscape 2.0 don't work.

Basically all you do is directly change the SRC attribute of an IMG tag:

document.images[image_number_in_this_frame].src="some-image.gif";

The only gotchas I know of are these:

• Netscape for Macintosh has a GIF transparency bug: it forgets to erase the previous image before drawing the new one. Even making a simple Animated GIF with disposal set to background doesn't help. My workaround is to first set the image to a square that matches the background, then set it to what you really wanted.
• If you use OnMouseOver or something similar to invoke the script, preloading the images (perhaps by putting them at the bottom of the page with WIDTH and HEIGHT set to 1, or as I did in the Washington National Cathedral site, preloading them in an obscured part of a frame with SCROLLING=NO so they can't be seen but are still loaded by the browser) is a good idea. Otherwise they half-load as a user hovers over the OnMouseOver'ed elements, and it looks bad.
• You have to have the OnMouseOver as an attribute of something, like a link or an imagemap, etc.

These two images are image[0] and image[1] within this frame:

Here's the eraser image:

I use document.images[0].src as an object specifier for the 1, and document.images[1].src for the2. main is just the name of this rightmost frame as defined by the frameset tag on my home page.

Hover over this to see them flip flop: Back to Main JavaScript Page

Hover over this to put them back. Go back to my home page.