Region Grouping example

Grouping all New England states

by jamietre

HTML

<script src="http://www.outsharked.com/scripts/dev/jquery.imagemapster.js"></script>
<img id="usa" style="width:500px;height:309px;" src="http://www.outsharked.com/imagemapster/examples/images/usa_map_720.png" usemap="#usa-map">

<br>
<a id="maine-only" href="#">Toggle just OK</a>
<div id="ver"><br></div>
<map id="usa_image_map" name="usa-map">
        <area href="#" state="NH" full="New Hampshire" shape="rect" coords="512,29,586,44">
        <area href="#" state="VT" full="Vermont" shape="rect" coords="543,49,586,62">
        <area href="#" state="MA" full="Massachusetts" shape="rect" coords="515,68,585,80">
        <area href="#" state="RI" full="Rhode Island" shape="rect" coords="650,149,711,161">
        <area href="#" state="CT" full="Connecticut" shape="rect" coords="655,167,711,179">
        <area href="#" state="NJ" full="New Jersey" shape="rect" coords="656,185,711,198">
        <area href="#" state="DE" full="Delaware" shape="rect" coords="665,204,711,216">
        <area href="#" state="MD" full="Maryland" shape="rect" coords="667,223,711,235">
        <area href="#" state="DC" full="District of Columbia" shape="rect" coords="654,239,711,252">
        <area href="#" state="WV" full="West Virginia" shape="rect" coords="649,257,711,270">
        <area href="#" state="SC" full="South Carolina" shape="poly" coords="551,314,551,314,548,314,548,312,547,310,545,308,544,308,542,304,540,299,537,299,536,297,535,295,533,293,532,293,530,290,528,289,524,287,524,287,523,284,522,284,520,280,518,280,515,278,513,277,513,276,514,275,515,274,515,272,520,270,526,267,531,266,543,266,545,267,546,270,549,269,559,269,560,269,570,275,577,281,573,284,572,289,571,293,569,294,569,296,567,296,566,299,563,301,562,303,561,304,558,306,556,307,557,309,553,313,551,314">
        <area href="#" state="HI" full="Hawaii" shape="poly" coords="169,391,170,389,172,388,172,389,170,391,169,391">
        <area href="#" state="HI" shape="poly"...

JavaScript

$('#ver').html('<br>Version '+$.mapster.version);
var img = $('#usa');
img.mapster({ 
    mapKey: 'state',
    showToolTip: true,
    areas: [
        { key: 'TXOK',
          toolTip: 'Test Tool Tip'
         }]
});
$('#maine-only').bind('click',function(e) {
   e.preventDefault();
   var isSelected= img.mapster('get','OK');
   img.mapster('set',!isSelected,'OK');
});