You can do this in more than one way. One approach is to have two background images, swapping one for the other on a mouse over event.

In your ascx:

    <div class="imagesarea" >
     <a class="link01" href="/Default.aspx?tabid=72"></a>
     <a class="link02" href="/Default.aspx?tabid=53"></a>
    ...
    </div>

in the css:

The css in the link01class has an on hover:

.imagesarea a
{
 margin: 0px; padding: 0px; border: solid 0px #ffffff;
 height: 100px;
 width: 100px;
 display: block;
 float: left;
 margin: 0 2px 0 2px;
}

a.link01
{
 background-image: url(images/photo1.jpg);
}
a.link01:hover
{
 background-image: url(images/photo2.jpg);
}

I can't show you the site because it is behind a firewall.

Peter

I would add one little trick to Peter's excellent instruction, in order to pre-load the mouseover images so the user sees no delay.

Near the beginning of the .ascx file, after the declarations, embed the hover image invisibly in this way:
<img src="<%= SkinPath %>images/photo2.jpg" alt="" class="hiddenPic">
And in the .css file, add the "hiddenPic" style:
.hiddenPic{ display:none }

Works like a charm...