In order to change just a particular piece of an image for image switching, you need to cut your picture up into pieces. But then, the trick is to how to put it back together again! Right now, the best way is with tables.

First, put each image in a cell:
<TD><IMG SRC="w1.gif" WIDTH="126" HEIGHT="72"></TD> <TD><IMG SRC="w2.gif" WIDTH="144" HEIGHT="72"></TD> <TD><IMG SRC="w3.gif" WIDTH="118" HEIGHT="72"></TD>

Put row tags around them to keep each row together horizontally:
<TR> <TD><IMG SRC="w1.gif" WIDTH="126" HEIGHT="72"></TD> <TD><IMG SRC="w2.gif" WIDTH="144" HEIGHT="72"></TD> <TD><IMG SRC="w3.gif" WIDTH="118" HEIGHT="72"></TD> </TR>

Now wrap the whole thing in a table.
Make sure to set cellspacing, cellpadding and border to "0".
To help maintain the width of the table, give it a width
amount equal to the total width of the cells:
<TABLE BORDER=0 CELLSPACING="0" CELLPADDING="0" WIDTH="388"> <TR> <TD><IMG SRC="w1.gif" WIDTH="126" HEIGHT="72"></TD> <TD><IMG SRC="w2.gif" WIDTH="144" HEIGHT="72"></TD> <TD><IMG SRC="w3.gif" WIDTH="118" HEIGHT="72"></TD> </TR> <TR><TD><IMG SRC="w4.gif" WIDTH="126" HEIGHT="72"></TD> <TD><IMG SRC="w5.gif" WIDTH="144" HEIGHT="72"></TD> <TD><IMG SRC="w6.gif" WIDTH="118" HEIGHT="72"></TD> </TR> <TR><TD><IMG SRC="w7.gif" WIDTH="126" HEIGHT="82"></TD> <TD><IMG SRC="w8.gif" WIDTH="144" HEIGHT="82"></TD> <TD><IMG SRC="w9.gif" WIDTH="118" HEIGHT="82"></TD> </TR></TABLE>

HINTS

If you write your code like this:

<TD> <IMG SRC="w1.gif" WIDTH="126" HEIGHT="72"> </TD> You may cause spaces to show up between cells. It's okay to write it like this when setting up tables, especially if they are complicated, but go back and take out those extra carriage returns when you are done.