Image Based CSS Menu

Hi all. Need some help. Not sure if I am asking this correcting. But I'm looking for a tutor on image based css menus. I found one but I just don't really get it. I need one from start to finish. When I say start like the best way to create in Photoshop. I have seen them done where you have two or three images of each word and then when you rollover or click you see a different image. When I disected the images, it looks like they create 2 or 3 images very close in design and then the CSS helps with the position of the image. I understand part of it, but there is something that I'm not getting. Here is a link to the one I found: http://www.webdesignerwall.com/tutorial ... -css-menu/ , if someone can find a more descriptive one, I would be very appreciative.

Thanks in advance!

The idea is very simple:

Here is the CSS:

ul{
list-style: none;
}

li{
position:relative;
align:left;
}

#home{
background:url(home1.jpg) no-repeat;
}

#home:hover{
background:url(home2.jpg) no-repeat;
}

#contact{
background:url(contact1.jpg) no-repeat;
}

#contact:hover{
background:url(contact2.jpg) no-repeat;
}

Here is the XHTMl:

<ul>
<li id="home"></li>
<li id="contact"></li>
</ul>

you only have to make home1.jpg and home2.jpg 2 different buttons and the same goes for contact and when you hover over the li the button changes, and of course other atributes can be added such as width and height so the li have the same dimmensions as the images!:)
Hope this hellps..

Below is what I used. And it works in IE and breaks up in everything else. It puts these weird white spaces next to each image. I think I am going to try your way shortly. Just gettting a little frustrated.


CSS:

.menu {
margin: 0;
padding: 0;
list-style: none;
background: #fff;
position: relative;
left: 188px;
top: 231px;
}
.menu li {
padding: 0;
margin: 0;
margin-right: 37px;
list-style: none;
background-repeat: no-repeat;
height: 28px;
}
.menu li a, .menu li a:visited {
display: block;
text-decoration: none;
text-indent: -3000px;
height: 28px;
background-repeat: no-repeat;
}
.home {background-image: url(images/homeHover_btn.jpg); width: 84px;}
.home a {background-image: url(images/home_btn.jpg);}
.entertainment {background-image: url(images/entHover_btn.jpg);width: 216px;}
.entertainment a {background-image: url(images/ent_btn.jpg);}
.designers {background-image: url(images/designHover_btn.jpg); width: 148px;}
.designers a {background-image: url(images/design_btn.jpg);}
.models {
background-image: url(images/modelsHover_btn.jpg);
width: 113px;
}
.models a {
background-image: url(images/model_btn.jpg);
}
ul.menu li a:hover {background: none;}
.menu li {float: left;}
.menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

HTML:

<ul class="menu">
<li class="home"><a href="#">Home</a></li>
<li class="entertainment"><a href="#">Entertainment</a></li>
<li class="designers"><a href="#">Designers</a></li>
<li class="models"><a href="#">Models</a></li>
</ul>

By the way I need to put these in an exact location. Having issues logging on to my server but here is a screenshot:

Resolved. Thanks