Image map with jQuery hovers.

by morrison

HTML

<div>
    <img id="Check-City-USA" src="http://www.checkcity.com/images/largeMap.png" usemap="#Check-City-USA" border="0" width="720" height="576" alt=""/>
    <map id="_Check-City-USA" name="Check-City-USA">
        <area shape="poly" coords="47,35,67,44,59,57,70,29,132,43,123,94,57,85,55,73,45,71" href="washington-rates.aspx" alt="Washington" title="Washington"/>
        <area shape="poly" coords="133,43,145,45,141,64,154,87,149,105,166,123,187,126,181,171,110,157,116,123,114,114,127,100,122,92" href="idaho-rates.aspx" alt="Idaho" title="Idaho"/>
        <area shape="poly" coords="145,45,276,64,273,130,192,121,187,126,166,128,159,105,152,106,156,86" href="montana-rates.aspx" alt="Montana" title="Montana"/>
        <area shape="poly" coords="277,64,273,114,361,117,352,67" href="north-dakota-rates.aspx" alt="North Dakota" title="North Dakota"/>
        <area shape="poly" coords="353,67,376,66,377,60,384,72,401,71,417,80,435,81,410,101,410,113,403,122,403,138,420,148,424,157,363,158,362,128,359,124,361,118" href="https://www.checkcity.com/newmember.aspx" alt="Minnesota" title="Minnesota"/>
        <area shape="poly" coords="410,103,427,96,425,105,458,86,453,99,491,94,508,103,466,127,468,170,434,173,427,169,423,149,405,138,403,121,410,115" href="wisconsin-rates.aspx" alt="Wisconsin" title="Wisconsin"/>
        <area shape="poly" coords="481,182,490,163,482,141,486,126,494,129,496,110,515,117,518,132,512,144,526,137,531,158,521,177" href="https://www.checkcity.com/newmember.aspx" alt="Michigan" title="Michigan"/>
        <area shape="poly" coords="566,160,568,166,622,154,643,166,639,121,632,100,617,104,602,121,605,131,573,142,577,150" alt="New York - No Products Available" title="New York - No Products Available"/>
        <area shape="poly" coords="633,100,652,93,655,102,651,107,651,134,644,135" href="https://www.checkcity.com/newmember.aspx" alt="Vermont" title="Vermont"/>
        <area shape="poly" coords="655,88,670,121,664,129,651,132"...

CSS

#modal {
    position:absolute;
    
    width:130px;
    padding:15px;
    background:rgba(255,255,255,.8);
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    
    -webkit-box-shadow: .1em .1em .4em rgba(0,0,0,.33);
    -moz-box-shadow: .1em .1em .4em rgba(0,0,0,.33);
    box-shadow:   .1em .1em .4em rgba(0,0,0,.33);
};

JavaScript

(function($) {
    var modal;
    $('body').append($('<div>', {
        'id': 'modal'
    }));
    modal = $('#modal');
    $('#_Check-City-USA').on('mousemove', 'area', function(event) {
        modal.empty().text($(this).attr('title')).position({
            my: 'left top',
            at: 'right bottom',
            of: event,
            offset: '20 20',
            collision: 'flip'
        });
    }).on('mouseout', function() {
        modal.hide();
    }).on('mouseover', function() {
        modal.show();
    });

})($);