It seems that using a traditional image map won't achieve what you're looking for:
<img usemap="#map" />
<map name="map">
<area coords="foo,bar">
<area coords="foo,bar">
<area coords="foo,bar">
</map>
However, there is an alternative method to accomplish your goal using only HTML and CSS, employing a modified version of the CSS sprites technique. You can find a tutorial on how to implement this approach here:
Here's a brief summary of this technique: DEMO Code
Initially, create your base image as usual. Then, generate various hover states by doubling the canvas size of your image and incorporating the hover effect in the new lower section. This will result in something akin to this:
Hopefully, your image looks more appealing than this example. http://demo.raleighbuckner.com/so/1369820/test.jpg
Next, proceed with the HTML and CSS setup using an unordered list:
<style>
#fakeMap {
list-style: none; margin: 0; padding: 0;
position: relative;
width: 200px;
height: 100px;
background: url(test.jpg) no-repeat 0 0;
}
#fakeMap li {
position:absolute;
}
#fakeMap a {
display:block;
width:100%;
height:100%;
text-indent:-5000px;
}
/* Determine each LI's dimensions and position. */
#maplink1 { width:15px; height:15px; top:10px; left:10px; }
#maplink2 { width:20px; height:20px; top:30px; left:30px; }
#maplink3 { width:80px; height:30px; top:20px; left:70px; }
/* Define the image for all links. */
#fakeMap a:hover { background: url(test.jpg) no-repeat; }
/* Specify the background position for each link individually. */
#fakeMap #maplink1 a:hover { background-position:-10px -110px; }
#fakeMap #maplink2 a:hover { background-position:-30px -130px; }
#fakeMap #maplink3 a:hover { background-position:-70px -120px; }
</style>
<ul id="fakeMap">
<li id="maplink1"><a href="link1.htm">Link 1 Text</a></li>
<li id="maplink2"><a href="link2.htm">Link 2 Text</a></li>
<li id="maplink3"><a href="link3.htm">Link 3 Text</a></li>
</ul>