An easy way to add disjointed rollover effect to already rollover code?

So, I have this css and code that has a main background image set for “map_holder” div of a USA map. Inside this div is a 2 button horizontal navi bar. I have it coded such that when you rollover the li btn’s, I use the sprite images that offset to get a rollover effect button image change. Easy stuff. BUT.. what I was wondering is if I could ALSO then add [B]in without much rewriting[/B] as it is just a touch I would like to add, but is not crucial, on each li btn’s rollover, not only keep the rollover I currently do but also change the background image of “map_holder” to also correspond to an USA map image more relative to each li btn selection. thoughts? I have attached an image so you can see the layout and understand that when you rollover the button, I would also like to swap out the background image of the map for a map that is a visual cue of what you will see.

[CODE]#map_holder {
width:300px;
height:32px;
display: block;
}
#map_holder ul {
list-style:none;
display:inline
}
#map_holder li {
display: inline;
}
#map_holder ul li.btn_finder a {
float: left;
background: url(/images/btn_finder_store.jpg) top left no-repeat;
width: 150px;
height: 32px;
display: block;
text-indent: -9999px;
}
#map_holder ul li.btn_finder a:hover {
background-position: 0px -32px;
}
#map_holder ul li.btn_adder a {
float: left;
background: url(/images/btn_adder_store.jpg) top left no-repeat;
width: 150px;
height: 32px;
display: block;
text-indent: -9999px;
margin: 0px;
}
#map_holder ul li.btn_adder a:hover {
background-position: 0px -32px;
}
[/CODE]

[code=html]<div id=”map_holder”>
<ul>
<li class=”btn_finder”><a href=”store-locator/locate-a-store.php”>Find a Store</a></li>
<li class=”btn_adder”><a href=”store-locator/add-a-store.php”>Add A Store</a></li>
</ul>
</div>[/code]

[upl-file uuid=e631fb6b-2331-4a75-af26-d04d2e95ad98 size=19kB]idea.jpg[/upl-file]

Also in #CSS _↴