使用mapster突出显示地图区域问题

Question

我试图让我的地图的每个部分突出显示用户将鼠标悬停在其上时。但由于某种原因，它不起作用。我已经做了一个jsfiddle来更好地解释问题http://jsfiddle.net/5qcbvp7k/3/

HTML

<img border="0" id="image_maping" usemap="#Map" src="http://www.dlpconsult.com/jack/images/map.png" alt="map">
<map id="Map" name="Map">
    <area class="mapping" id="1" shape="poly" coords="2,157">
    <area class="mapping" id="2" shape="poly" coords="25,138" alt="map">
    <area class="mapping" id="3" shape="poly" coords="3,157">
    <area class="mapping" id="4" shape="poly" coords="1,156,21,139,46,135,57,135,74,134,90,132,101,121,126,118,141,118,156,116,169,116,174,135,185,148,189,166,180,185,177,200,187,219,201,227,196,236,190,238,153,225,130,224,120,243,55,212,2,182">
    <area class="mapping" id="5" shape="poly" coords="176,116,192,112,218,101,240,96,255,97,274,104,291,111,301,117,319,135,338,158,351,181,360,196,344,201,332,199,324,199,320,206,313,207,310,213,287,213,246,200,234,202,219,209,197,215,180,219,172,117">
    <area class="mapping" id="6" shape="poly" coords="297,110,309,108,317,96,323,85,342,95,360,115,384,130,405,138,405,153,396,167,379,178,367,193,360,198">
    <area class="mapping" id="7" shape="poly" coords="325,82,337,67,351,61,372,55,391,43,413,28,450,16,483,3,508,4,525,24,546,44,547,57,547,72,454,89,441,102,429,115,414,130,410,140,406,152,325,86">
</map>
<div id="message"></div>

JS

$('.mapping').mouseover(function() {

    var id = $(this).attr('id');
    if (id == 4) {
        $(this).mapster({
            fillColor: 'ff0000',
            fillOpacity: 0.3
            });
        $('#message').html('This is description for the first piece');
    }
    if (id == 5) {
        $(this).mapster({
            fillColor: 'ff0000',
            fillOpacity: 0.3
            });
        $('#message').html('This is description for the second piece');
    }
   if (id == 6) {
        $(this).mapster({
            fillColor: 'ff0000',
            fillOpacity: 0.3
            });
        $('#message').html('This is description for the 3rd piece');
    }
    if (id == 7) {
        $(this).mapster({
            fillColor: 'ff0000',
            fillOpacity: 0.3
            });
        $('#message').html('This is description for the 4th piece');
    }
    //$('#message').html(id);
}).mouseout(function(){
   // $('#message').html('');   
});