Cacher is the code snippet organizer for pro developers

#imageMap {
	position: absolute;
	z-index: 200;
}
.imagesMap .map {
	background: url('map.png') 0 0 no-repeat;
	border: 0;
	margin: 0 auto;
	width: 816px;
	height: 370px;
	position: relative;
}
.imagesMap .map .region {
	position: absolute;
	width: 823px;
	height: 370px;
	z-index: 100;
	display: none;
}
.imagesMap #b1 { background: url('/r1.png') 114px 201px no-repeat; }
.imagesMap #b2 { background: url('/r2.png') 434px 182px no-repeat; }
.imagesMap #b3 { background: url('/r3.png') 467px 19px no-repeat; }

<div class="imagesMap">
  <div class="map">
    <img id="blankImg" src="blank.gif" usemap="#imageMap" alt="" width="816" height="358">
    <div id="b1" class="region">&nbsp;</div>
    <div id="b2" class="region">&nbsp;</div>
    <div id="b3" class="region">&nbsp;</div>
    <img src="map.png" alt="">
    <map id="imageMap" name="imageMap">
      <area id="a1" shape="poly" alt="" title="" href="#" target="" coords=""/>
      <area id="a2" shape="poly" alt="" title="" href="#" target="" coords="" />
      <area id="a3" shape="poly" alt="" title="" href="#" target="" coords="" />
    </map>
  </div>
</div>

if($('#imageMap')) {
    $('#imageMap area').each(function() {
        var id = $(this).attr('id').replace('a', 'b');
        $(this).mouseover(function(e) {
            $('#'+id).show();
        });
        $(this).mouseout(function(e) {
            $('#'+id).hide();
        });
    });
}