In my previous post i showed how to use a background image to fill a list. Now i will show how you can make a link with a rollover and destination using the same technique.

Use this picture:

CSS:

ul {
margin:0px;
padding:0px;
list-style:none;
}
ul li{
background-image:url(home.gif);
float:left;
margin-right:16px;
}
.tab1{
height:24px;
width:53px;
background-position:0px 0px;
}
.tab1 a{
height:24px;
width:53px;
text-decoration:none;
display:block;
text-indent:-9999px;
position:absolute;
}
.tab1:hover{
background-position:0px -48px;
}

HTML:

<li class="tab1"><a href="http://www.google.nl">google</a></li>
<li class="tab1"><a href="http://www.google.nl">google</a></li>

As you see I use a normal <a> in my list. The <a> is set up absolute with a text indent of -9999px. Because we use a width and a height which are the same as your image your complete <li> will turn into a link to google!

RESULT: