Jquery not working on poly area?

Can anybody explain me this detailed? I´m trying to do this:

Beatles map

    <img id="beatles" src="http://ift.tt/2lwYEeS" 
    style="width:400px;height:240px;" usemap="#beatles-map">
<map name="beatles-map">
    <area shape="rect" data-name="paul,all" coords="36,46,121,131" href="#" />
    <area shape="rect" data-name="ringo,all" coords="113,76,198,161" href="#" />
    <area shape="rect" data-name="john,all" coords="192,50,277,135" href="#" />
    <area shape="rect" data-name="george,all" coords="262,60,347,145" href="#" />
</map>

<div id="beatles-caption" style="clear:both;border: 1px solid black; width: 400px; padding: 6px; display:none;">
     <div id="beatles-caption-header" style="font-style: italic; font-weight: bold; margin-bottom: 12px;"></div>
     <div id="beatles-caption-text"></div>
</div>


 var inArea,
            map = $('#beatles'),
            captions = {
                paul: ["Paul McCartney - Bass Guitar and Vocals",
                    "Paul McCartney's song, Yesterday, recently voted the most popular song "
                      + "of the century by a BBC poll, was initially composed without lyrics. "
                      + "Paul used the working title 'scrambled eggs' before coming up with the final words."],
                ringo: ["Ringo Starr - Drums",
                  "Dear Prudence was written by John and Paul about Mia Farrow's sister, Prudence, "
                    + "when she wouldn't come out and play with Mia and the Beatles at a religious retreat "
                    + "in India."],
                john: ["John Lennon - Guitar and Vocals",
                  "In 1962, The Beatles won the Mersyside Newspaper's biggest band in Liverpool "
                    + "contest principally because they called in posing as different people and voted "
                    + "for themselves numerous times."],
                george: ["George Harrison - Lead Guitar and Vocals",
                 "The Beatles' last public concert was held in San Francisco's Candlestick "
                    + "Park on August 29, 1966."]
            },
            single_opts = {
                fillColor: '000000',
                fillOpacity: 0,
                stroke: true,
                strokeColor: 'ff0000',
                strokeWidth: 2
            },
            all_opts = {
                fillColor: 'ffffff',
                fillOpacity: 0.6,
                stroke: true,
                strokeWidth: 2,
                strokeColor: 'ffffff'
            },
            initial_opts = {
                mapKey: 'data-name',
                isSelectable: false,
                onMouseover: function (data) {
                    inArea = true;
                    $('#beatles-caption-header').text(captions[data.key][0]);
                    $('#beatles-caption-text').text(captions[data.key][1]);
                    $('#beatles-caption').show();
                },
                onMouseout: function (data) {
                    inArea = false;
                    $('#beatles-caption').hide();
                }
            };
        opts = $.extend({}, all_opts, initial_opts, single_opts); 
map.mapster('unbind')
            .mapster(opts)
            .bind('mouseover', function () {
                if (!inArea) {
                    map.mapster('set_options', all_opts)
                       .mapster('set', true, 'all')
                       .mapster('set_options', single_opts);
                }
            }).bind('mouseout', function () {
                if (!inArea) {
                    map.mapster('set', false, 'all');
                }
            });

But I want an specified area instead of a square. For a map like this Map

Do you know how to get that .js functioning?

PD: I´m creating a responsive web.