JavaScript Rollover Menus

Note: The animated examples on this page only work if you have Netscape Navigator 3.0 and above or Microsoft Internet Explorer 4.0, both of which, by the way, are free for downloading.

Now that Internet Explorer 4.0 supports them, JavaScripted rollover menus where one image is replaced by another are all the rage on the Net. Barely a day passes on the comp.lang.javascript newsgroup when five new JavaScripters don't ask how one does it.

The first three examples below are fairly standard examples of how replacing one static image by another can create special effects, like menu buttons that light up, press down, or pop up. The following three are examples of how one can hide an animated GIF beneath a static gif for even more startling effects. Within these two models, only your imagination limits what you might do.

And, technically, it should even be possible to create a letter that fidgets and GIGGLES when you touch it, but this would involve some more complex JavaScript programming that plays a midi sound but would not annoy people who don't have a midi player with a "get plugin?" message everytime they moused over a menu button. So don't ask us for it just yet.

Semi-transparent overlay

Shadowed letter that presses down

Button that pops up and lights up

Shadowed letter that presses down and fidgets

Letter that dissolves, then displays a message

Note: Since the animation does not loop, and hence stops after the first display, you have to reload the page in your browser to see it a second time; and some feature in Navigator 3.0's scrolling apparatus makes the underlying unlooped animation run and exhaust itself if it isn't loaded in the immediately visible area of one's screen or one scrolls over it before clicking the letter. Alas! when Netscape designed 3.0, it wasn't thinking of anyone trying to use such an effect.

Modest button that turns into a pulsating alert

| Writing | Web Site Design | Programming | Guitar | Links |

JavaScript index page

E-mail Pete the answers to all his questions.