Image Mapster Dynamic Resize Demo

by jamietre

HTML

<script src="http://www.outsharked.com/scripts/dev/jquery.imagemapster.js"></script>
<img id="themap" src="https://github.com/jamietre/ImageMapster/raw/master/examples/images/usa_map_720.png" 
usemap="#usa" style="width:100%;">
<map id="usa_image_map" name="usa">
    
    <!-- New England states -->
    
    <area href="#" data-state="ME,new-england,really-cold" full="Maine" shape="poly" coords="669,71,671,72,672,75,672,76,671,80,669,80,667,83,663,86,660,85,659,86,658,87,657,88,659,89,658,89,658,92,656,92,656,90,656,89,655,89,653,87,652,88,653,89,653,90,653,91,653,93,653,95,652,96,650,97,650,98,646,101,644,101,644,100,641,103,642,105,641,106,641,110,640,115,638,114,638,112,635,111,635,109,629,92,626,81,628,81,629,81,629,80,629,75,631,72,632,69,631,68,631,63,632,62,632,60,632,59,632,56,633,52,635,46,637,43,638,43,638,43,638,44,639,45,641,46,642,45,642,44,645,42,647,41,647,41,652,43,653,44,659,65,664,65,665,67,665,70,667,72,668,72,668,71,667,71,669,71">
    <area href="#" data-state="ME,new-england,really-cold" shape="poly" coords="654,92,655,92,656,92,656,94,655,95,654,92">
    <area href="#" data-state="ME,new-england,really-cold" shape="poly" coords="659,88,660,89,662,87,662,86,660,86,659,88">
    
    <area href="#" data-state="NH,new-england,really-cold" shape="poly" coords="639,118,639,117,640,115,638,114,638,112,635,111,635,109,629,92,626,81,626,81,625,83,624,82,623,81,623,83,622,87,622,91,623,93,623,96,621,99,619,100,619,101,620,102,620,108,619,115,619,118,620,119,620,122,620,124,620,125,633,122,635,122,636,119,639,118">    
    <area href="#" data-state="NH,new-england,really-cold" full="New Hampshire" shape="rect" coords="512,29,586,44">
    
    <area href="#" data-state="VT,new-england,really-cold" full="Vermont" shape="rect" coords="543,49,586,62">
    <area href="#" data-state="VT,new-england,really-cold" shape="poly"...

CSS

body
{
     font-family: Arial, Helvetica;
     font-size: 12px;
     padding: 10px;
}
p
{
   padding-bottom: 10px;   
    
}
li
{
    list-style-position: outside;
    list-style-type: disc;
    padding-bottom: 6px;  
    margin-left: 20px;
}

a.showhide
{
   text-decoration: none;   
}
.box
{
    white-space: normal;
    width: 100%;
    padding-bottom: 6px;
}
.box-inner
{
    border: 1px solid black;   
    padding: 6px;
    overflow-x: hidden;    
    white-space: normal;
}

JavaScript

var image = $('#themap');

image.mapster({
    mapKey: 'data-state',
});

var resizing,
    body= $(body),
    win=$(window),
    diffW=win.width() - image.width(),
    lastw=win.innerWidth(),
    lasth=win.innerHeight();

var resize = function() {
    var win= $(window),
        width=win.width(), height=win.height();
    // only try to resize every 200 ms 
    if (resizing) {
        return;
    }
    if (lastw !== width || lasth !== height) {
        resizing=true;
        image.mapster('resize',width-diffW,0,200);     
        lastw=width;
        lasth=height;
        setTimeout(function() {
            resizing=false;
            resize();
        },200);
    } else {

    }
};
$(window).bind('resize',resize);