Clean USA Map Demo

by jamietre

HTML

<script src="http://www.outsharked.com/scripts/jquery.imagemapster.js"></script>
<img src="http://www.outsharked.com/images/usa_map_720.png" 
usemap="#usa">
<map id="usa_image_map" name="usa">
    <area href="#" state="NH" full="New Hampshire" shape="rect" coords="512,29,586,44">
    <area target="_blank" href="http://vermont.com" 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" coords="176,389,181,390,182,390,183,387,183,385,180,384,177,386,176,389">
    <area href="#" state="HI" shape="poly" coords="199,395,201,400,203,399,204,399,205,400,208,400,208,398,206,398,205,395,203,392,199,395,199,395">
   ...

JavaScript

$(document).ready(function() {
    var img = $('img'),
        imgRoot = 'http://www.outsharked.com/images/';

    img.mapster({
        showToolTip: true,
        mapKey: 'state',
        onClick: function(e) {
            debugger;
            e.e.preventDefault();
            var target = $(this).attr('target');
            if (target=='_blank') {
                window.open($(this).attr('href'));
            }
            return false;
        },
        altImages: {
            img4: imgRoot + 'usa_map_720_alt_4.jpg',
            img5: imgRoot + 'usa_map_720_alt_5.jpg'
        },

        areas: [
            {
            key: 'TX',
            toolTip: 'test &amp; test2',
            stroke: true,
            render_highlight: {
                altImage: 'img4'
            },
            render_select: {

                stroke: false,
                fillOpacity: 0.3,
                altImageOpacity: 0.5,
                altImage: 'img5'

            }},
        {
            key: 'WA',
            render_select: {
                altImage: 'img4'
            }

            }

        ]
    });
});