If the areas containing the changing area can be contained within a rectangle, then you can use the clip attribute to mimic a hover affect within the map.
You create two images, one with all of the items un-hovered, and another with them all hovered.
Then you can use something like this:
<html>
<head>
<title>A</title>
<style type="text/css">
img
{
position:absolute;
}
</style>
<script type="text/javascript">
function clipImage(a){
b = a.split(',');
document.getElementById("img2").style.display='block';
document.getElementById("img2").style.clip = "rect("+parseInt(b[1])+"px,"+parseInt(b[2])+"px,"+parseInt(b[3])+"px,"+parseInt(b[0])+"px)";
}
function unclip() {
document.getElementById("img2").style.display='none';
}
</script>
</head>
<body>
<map id="b" name="b">
<area coords="43,34,136,105" href="#a1" shape="rect" onmouseover="clipImage(this.coords)" />
<area coords="100,163,220,258" href="#a1" shape="rect" onmouseover="clipImage(this.coords)" />
<area coords="296,194,409,271" href="#a1" shape="rect" onmouseover="clipImage(this.coords)" />
<area coords="370,52,486,155" href="#a1" shape="rect" onmouseover="clipImage(this.coords)" />
<area coords="248,398,379,481" href="#a1" shape="rect" onmouseover="clipImage(this.coords)" />
</map>
<img id="img1" border="0" src="a2.png" width="800" height="600" usemap="#b" style="top: 10px; left: 10px;" onmouseover="unclip()"/>
<img id="img2" border="0" src="a1.png" width="800" height="600" style=" top: 10px; left: 10px; display:none;" />
</body>
</html>
Which should perform the desired effect.
I have attached a working example to show you what can be achieved.
Notice how you never see the background of the hover image, so you can actually create that image with just the hover bits and save some space.
