I've seen many tutorials for navigations using images and Javascript, all sorts of bulky code and needless code, well here's one I found that really simplifies things and explains it short and sweet. Image rollovers using CSS only. No Javascript, no bloated, bulky code. http://www.tutorio.com/tutorial/pure-css-image-rollovers
HTML

<div class="rollover">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Tutorio</a>
</div>

CSS

.rollover a {
display:block;
width: 90px;
padding:10px 10px 10px 7px;
font: bold 13px sans-serif;;
color:#333;
background: url("rollover-image.gif") 0 0 no-repeat;
text-decoration: none;
}
.rollover a:hover { 
background-position: 0 -35px;
color: #049;
}
.rollover a:active {
background-position: 0 -70px;
color:#fff;
}

Creating the image
The first step is to creating a button is to create a background graphic for the button in an image editor such as Photoshop. Divide the image up into three equal sections, one for each state of the button.
   1. Normal (what the button looks like normally )
   2. Hover (this will be used when the image is rolled over.)
   3. Hit (this will be used when the mouse is clicked.)
   
   
The important thing to notice here is image that you created is used as a background for the links. The background is then positioned on a:hover (on rollover), and on a:active (on click)
My image was 105 pixel high and divided up into blocks of 35px each. So the background is positioned at -35px on rollover (a:hover) to move it up by 35 pixels. I change the background position, on a:active to move it up by -70px so that only the bottom part of the image is seen
Also notice the padding values, and the width these will vary from image to image.
I did something similar, a bit more heavy code-wise, with images, and CSS awhile back.
Horizontal Image rollovers with CSS