I'm looking to simplify my site so it's not so long. If you look at:

http://www.canemasters.com/class-cane-p-297.html

what I'm wanting to do is to have only one image, and a css menu above the image with the different wood types. eg: hickory, hickory w/ heartwood,.... etc.

When you click the name of the wood type, the image will change. I'm playing with some css menus, but when you click the menu link, it's set up to take you to a url, not change an image.

I found this css menu generator at: http://cssmenumaker.com/process/step1.php?menu=h9

You can see what I'm trying to do there.

The generated html code I get is this:
------------------------------------------------------------------------------------
<ul id='menu'>
<li ><a class='current' href='http://www.canemasters.com' >Hickory</a></li>
<li ><a href='http://www.canemasters.com' >Hickory w/ Heartwood</a></li>
<li ><a href='http://www.canemasters.com' >Pure Hickory Heartwood</a></li>
<li ><a href='http://www.canemasters.com' >Oak</a></li>
<li ><a href='http://www.canemasters.com' >Cherry</a></li>
</ul>
--------------------------------------------------------------------------------------
And the css is this:
--------------------------------------------------------------------------------------
ul#menu { width: 100%; height: 43px; background: #FFF url("images/menu-bg.gif") top left repeat-x; font-size: 0.8em; font-family: "Lucida Grande", Verdana, sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0; }
ul#menu li { display: block; float: left; margin: 0 0 0 5px; }
ul#menu li a { height: 43px; color: #777; text-decoration: none; display: block; float: left; line-height: 200%; padding: 8px 15px 0; }
ul#menu li a:hover { color: #333; }
ul#menu li a.current{ color: #FFF; background: #FFF url("images/current-bg.gif") top left repeat-x; padding: 5px 15px 0; }
--------------------------------------------------------------------------------------

How would I make it pull up an image directly below the css menu?

Thank you!