^ you can make rollovers 10x easier than that.
the CSS:
CODE
.navigation { NAVIGATION PROPERTIES }
.navigation a { display:block; float:left; height:##px; text-indent:-999em; }
.navigation a:hover { background-position:bottom; }
.link-1 { background-image:url(IMAGE FOR 1ST LINK); width:##px; }
.link-2 { background-image:url(IMAGE FOR 2ND LINK); width:##px; }
.link-3 { background-image:url(IMAGE FOR 3RD LINK); width:##px; }
the HTML:
CODE
<div class="navigation">
<a class="link-1" href="URL">LINK 1</a>
<a class="link-2" href="URL">LINK 2</a>
<a class="link-3" href="URL">LINK 3</a>
</div>
instead of making two images, make only one. put the image you want for normal links on the top half, and the image you want for hovers on the bottom half. for
.navigation a { height:##px; } the height will be half the height of the image. for the widths, just put in the width in pixels.