I like the way it looks and works, but it adds a ton of code to the head section. There must be a simpler way to get a similar effect! I have to confess that I have to use others' scripts - my code writing is limited to a little basic html.

Does someone know of a script that can do this? The contents lists could be in the same place, in a container, but otherwise, I'd like to keep the page looking about like this. Of course, I'm also open to other suggestions as well.

Thanks.

A technique I use only puts Javascript into the A HREF tag, no header code at all. It seems to work fine in Explorer 4+ PC/Mac and Netscape 4+.

To do this you just need to name each IMG tag uniquely, then reference that in the HREF tag as:

a href="(filename)" onMouseOver="document.(image name).src='rollover-image.gif'" onMouseOut="document.(image name).src='normal-image.gif'"

(This isn't perfectly formed as I can't post HTML here - don't use any brackets around the name)

So, onMouseOver loads the rollover image, and onMouseOut resets it.

Using loads of code in the HEAD section achieves the same results (it also allows for preloading but you could still do this anyway) - it may also be more robust in slightly older browsers.