i didn't look at the source, but what it looks like is just a table with a background set to that image, which when hovered changes to the red with text in the middle with the link to the corresponding page. all that needs to be done is to take out the background (simple line of css) and the text and just make each text and picture one graphic to do the same thing. ill appreciate the ability to click anywhere on the button and not the font ;P
from:
<td class='topNav'><p class='topNav' width='182'><a href='/news.php'>HOME</a></font></p></td>
<td class='topNav'><p class='topNav' width='182'><a href='/e107_plugins/jbroster_menu/jbroster.php'>ROSTER</a></font></p></td>
<td class='topNav'><p class='topNav' width='182'><a href='/e107_plugins/forum/forum.php'>FORUMS</a></font></p></td>
<td class='topNav'><p class='topNav' width='182'><a href='/page.php?9'>MULTIMEDIA</a></font></p></td>
<td class='topNav'><p class='topNav' width='182'><a href='/page.php?47'>STATS/INFO</a></font></p></td>
to:
<td class='topNav'><p class='topNav' width='182'><a href='/news.php'><img src="IMGSRC" /></a></font></p></td>
<td class='topNav'><p class='topNav' width='182'><a href='/e107_plugins/jbroster_menu/jbroster.php'><img src="IMGSRC" /></a></font></p></td>
<td class='topNav'><p class='topNav' width='182'><a href='/e107_plugins/forum/forum.php'><img src="IMGSRC" /></a></font></p></td>
<td class='topNav'><p class='topNav' width='182'><a href='/page.php?9'><img src="IMGSRC" /></a></font></p></td>
<td class='topNav'><p class='topNav' width='182'><a href='/page.php?47'><img src="IMGSRC" /></a></font></p></td>