ImageMapster Vegetable Tray Demo

Shows how to use different area options, and handling special events

by jamietre

HTML

<script src="https://raw.github.com/jamietre/ImageMapster/master/dist/jquery.imagemapster.js"></script>
        <div style="width:410px; height:440px; float:right; margin-top:40px;">
            <img id="ohiomap" src="http://www.akronmediasolutions.com/omti/images/map.png" border="0" usemap="#Map" />
            <map name="Map" id="Map">
              <area shape="poly" coords="33,140,69,115,85,107,98,97,111,86,138,80,166,76,178,74,167,65,153,57,142,54,75,56,32,56" href="#" name="northwest" alt="northwest" />
              <area shape="poly" coords="192,71,189,78,178,74,119,83,104,94,88,106,66,119,45,132,31,143,27,231,68,221,97,214,126,209,158,208,180,207,205,200,222,185,236,174,244,160,227,130,215,92,203,77" href="#" name="central-west" alt="central-west" />
              <area shape="poly" coords="217,92,224,116,230,132,238,137,261,126,290,113,305,96,323,86,357,73,383,64,381,27,324,48,305,62,289,79,270,82,261,79" href="#" alt="northeast-coast" />
              <area shape="poly" coords="245,161,258,171,273,183,290,190,302,197,296,206,274,228,255,243,239,257,227,262,184,262,132,264,118,258,81,239,55,226,94,216,128,211,156,210,183,208,199,205,211,198,230,183,242,171,240,173,244,167" href="#" />
            </map>
      </div>

JavaScript

var defaultDipTooltip = 'I know you want the dip. But it\'s loaded with saturated fat, just skip it '
        +'and enjoy as many delicious, crisp vegetables as you can eat.';

    var carrotTooltip = 'Carrots?! I Love Carrots!';

    var image = $('#ohiomap');



    image.mapster(
    {
        fillOpacity: 0.1,
        fillColor: "d42e16",
        isSelectable: false,
        singleSelect: true,
        mapKey: 'name',
        listKey: 'name',
        toolTipContainer: '<div style="width:100px; height:100px; color:#BBBBBB"> </div>',       
        showToolTip: true,
        toolTipClose: ["image-mouseout"],
        areas: [{
                    key: "northwest",
                    toolTip: defaultDipTooltip,
                    },
                        
                    { 
                    key: "central-west",
                    toolTip: carrotTooltip
                    }]
    })
        .mapster('tooltip','northwest');