Image Switch Demo

First, put your mouse over the baby picture. See! The bird picture changed.
Now put your mouse over the bird picture. Look, both pictures switched!

<HTML><HEAD> <TITLE>Image Switch Demo</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <SCRIPT LANGUAGE="JavaScript"> pic1 = new Image(72, 72); pic1.src = "bridge.gif"; pic2 = new Image(72, 72); pic2.src = "butterfly.gif"; </SCRIPT> <CENTER> <TABLE BORDER=1 CELLSPACING="2" CELLPADDING="1"><TR><TD><a href="#" onMouseover="document.bird.src=pic1.src" onMouseout="bird.src='bird.gif'"> <IMG SRC="baby.gif" WIDTH="72" HEIGHT="72" NAME="baby" BORDER="0"></a></TD><TD><a href="#" onMouseover="document.bird.src=pic1.src; document.baby.src=pic2.src" onMouseout="bird.src='bird.gif'; baby.src='baby.gif'"><IMG SRC="bird.gif" WIDTH="72" HEIGHT="72" NAME="bird" BORDER="0"></a></TD></TR></TABLE></CENTER> </BODY> </HTML>

Well, now that you know how to do rollovers, we can do something a little fancier. Let's do a little image switching.

Notice that even though the link is around the baby picture, you can refer to the bird picture with the onMouseover and onMouseout.

If you put two references in the quotes, the onMouseover will do both at once! Just be sure to separate them with a semi-colon.
That's it! Now only your imagination can limit you.