Image Changes on Hover but stays - image

Question

I am making an interactive map and want to have buttons on it that will change color (separate image) when hovered over, and then link to different images.
I am having a huge problem with making this work... My current css is a mess:
a.button
{
position: inherit;
display:block;
background:transparent url('images/button.png') bottom;
background-repeat: no-repeat;
}
a.button:hover
{
position: inherit;
background-image: url('images/button_hover.png');
background-repeat: no-repeat;
}
#one
{
position: fixed;
left:225px;
top:702px;
}
HTML:
<div id="map"><img src="images/map.png"/></div>
<a href="http://matthewligotti.com" class="button"/>
<img src="images/button.png" id="one"/>
</a>
</div>
So I want the images to be links and hover the same two images for each button the only thing changing would be the links they bring you to. How do I do this?

Answer 1

If you can edit the images, you can combine them into one .png by stacking them on top of each other. Then, if buttons the buttons were 100px x 200px, you could do something like this:
a.button
{
display:block;
height:100px;
width:200px;
background-image:url('1.jpg');
background-position:0 0;
background-repeat: no-repeat;
}
a.button:hover
{
background-position:0 -100px;
}
and
<a href="http://matthewligotti.com" class="button"/></a>
<a href="http://matthewligotti.com" class="button"/></a>
which would switch the top or bottom half of the new double-image being displayed.
does that do what you mean?