移動時に途切れないmapのfade ref: http://qiita.com/ituki_b/items/935dcbb4b0b2c736608c

file0.html

<!--html-->
<img src="http://jsrun.it/assets/o/l/f/d/olfdl.gif" alt="" usemap="#link"><!--画像-->
<map name="link">
    <area shape="rect" coords="0,0,137,100" href="http://google.co.jp" alt="Google"><!--area1-->
    <area shape="rect" coords="138,0,275,100" href="http://yahoo.co.jp" alt="Yahoo"><!--area2-->
</map>

file1.js

//js
$('map').hover(function(){
    $('img[usemap="#' + $(this).attr('name') + '"]').fadeTo(100,0.3);
},function(){
    $('img[usemap="#' + $(this).attr('name') + '"]').fadeTo(100,1);
});

file2.js

$('map').hover(function(){
    $('img[usemap="#' + $(this).attr('name') + '"]').stop().fadeTo(100,0.3);
},function(){
    $('img[usemap="#' + $(this).attr('name') + '"]').stop().fadeTo(100,1);
});