Cacher is the code snippet organizer for pro developers

<script type="text/javascript" src="scripts/jquery.imagemapster.js"><script>

<!-- ============================HTML============================== -->
<img src="test/jquery/imagemapster/ImageMapster-master/examples/images/shapes.jpg" width="512" height="176" border="0" alt="" usemap="#shapes_Map"/>
<map name="shapes_Map">
    <area shape="rect" group="rectangle" alt="" coords="378,39,463,116" href="#">
	<area shape="poly" group="blue-circle" alt="" coords="286,34, 298,42, 308,54, 314,79, 307,103, 292,118, 270,125, 242,122, 227,112, 216,97, 212,73, 219,53, 227,43, 240,34, 264,29" href="#">
	<area shape="circle" group="inner-circle,inner-circle-mask" coords="101,81,36" href="#">
</map>

<!-- ============================JS================================ -->
<script>
// default options for all images
$('img').mapster();

//create map image from text
$('b').bind('mouseover', function() {
    $('img').mapster('tooltip',this,"The text is: " + $(this).text());
});

var image = $('#myimage');

// target a specific image
image.mapster({
    fill: true, // mouse click state
    fillColor: 'ff0000',
    fillOpacity: 0.3,
    
    // determines if you can click to highlight more than one section at a time
    singleSelect: true,
    
    // stroke
    stroke: true,
    strokeColor: "3320FF",
    strokeOpacity: 0.8,
    strokeWidth: 4,
    
    mapKey: 'name',
    listKey: 'name',
    
    noHrefIsMask: false,
    
    // stroke effect
    stroke:true,
    render_highlight: {
        strokeWidth: 2,
        fade: true  // fade effect, only in 'render_highlight'
    },
    // areas controls
    areas: [
        {
            key: 'somearea',
            includeKeys: 'rectangle,key1,key2',
            stroke: false,      //stroke is disabled in this key
            render_select: { 
                fillOpacity: 1 
            },
            render_highlight: {
                fillOpacity: 0.5,
                altImage: 'images/shape2.gif'
            }
        },
        {
            key: "redpepper",
            fillColor: "ffffff",
            strokeColor: "FFFFFF"
            toolTip: "tooltip message"  //tooltip string or jquery object
        },
        {
            key: 'outer-circle-mask',
            isMask: true,
            fillColorMask: '000000'
        },
    ],
    //click event
    onClick: function (e) {
        e.key;  //current clicked area
        
        // change the tooltip
        if (e.key === 'asparagus') {
            newToolTip = "OK. I know I have come down on the dip before, but let's be real. "
                +"Raw asparagus without any of that delicious ranch and onion dressing "
                +"slathered all over it is not so good.";
        }
        image.mapster('set_options', { 
            areas: [{
                key: "dip",
                toolTip: "new ToolTip"
                }]
            });
    },
    onStateChange: function(data) {
        //alert(data.state+":"+data.selected);
    },
    onShowToolTip: function(data) {
        /*data = {
                toolTip: jQuery object of the tooltip container
                areaOptions: { area_options },
                key: map key for this area,
                selected: true | false - current state of the area
         };*/
    },
    //when mouse enters a bound area.
    onMouseover: function(data) {
        /*
        {
            e: object,             // jQuery event object
            options: object  ,     // object of area-specific options
            key: 'string',         // area key
            selected: bool         // true if area is currently selected
        }
        */
    },
    //when mouse leavesd a bound area.
    onMouseout: function() {
        
    }
    //allow to show tooltip
    showToolTip: true,
    toolTipContainer: '<div>...</div>', //or jQuery object (override default)
    toolTipClose: ["tooltip-click", "area-click"],  //causes a toolTip to close.
    
});
</script>