JSFiddle - React, Tailwind, and code Playground

by robert_schutt

HTML

<script src="http://ii-net.me/jquery.maphilight.min.js"></script>
<map name="ImageMap_3_1371500463" id="ImageMap_3_1371500463">
<area href="/wiki/Alabama" shape="poly" coords="537,310,556,377,518,382,518,395,506,391,504,312" alt="Alabama" title="Alabama" />
<area href="/wiki/Alaska" shape="poly" coords="127,381,128,451,148,457,171,481,171,491,153,491,132,461,98,456,83,473,10,482,55,456,34,431,43,391,60,375,89,365" alt="Alaska" title="Alaska" />
<area href="/wiki/Arizona" shape="poly" coords="110,330,159,362,191,368,204,271,134,258,131,272,123,272,117,290,126,304" alt="Arizona" title="Arizona" />
<area href="/wiki/Arkansas" shape="poly" coords="409,289,408,337,416,350,460,350,472,311,479,295,467,290" alt="Arkansas" title="Arkansas" />
<area href="/wiki/California" shape="poly" coords="23,137,76,151,61,203,117,283,115,289,124,303,112,329,76,325,34,279,11,162" alt="California" title="California" />
<area href="/wiki/Colorado" shape="poly" coords="214,196,308,207,304,276,206,267" alt="Colorado" title="Colorado" />
<area href="/wiki/Connecticut" shape="poly" coords="683,154,683,172,705,163,703,150" alt="Connecticut" title="Connecticut" />
<area href="/wiki/Delaware" shape="poly" coords="663,199,667,225,678,225,674,213" alt="Delaware" title="Delaware" />
<area href="/wiki/Florida" shape="poly" coords="610,378,648,455,632,486,617,487,596,434,574,394,553,405,521,393,521,384,556,379,556,384" alt="Florida" title="Florida" />
<area href="/wiki/Georgia_(U.S._state)" shape="poly" coords="537,307,572,304,614,348,609,380,557,381" alt="Georgia" title="Georgia" />
<area href="/wiki/Hawaii" shape="poly" coords="183,423,180,461,216,491,283,492,286,465,244,424" alt="Hawaii" title="Hawaii" />
<area href="/wiki/Idaho" shape="poly" coords="141,40,128,89,134,97,121,117,114,159,189,172,197,131,172,128,167,106,158,109,160,88,146,60,152,42" alt="Idaho" title="Idaho" />
<area href="/wiki/Illinois" shape="poly"...

CSS

.map {
    opacity: 1.0;
}

JavaScript

/*$("map>area").hover(function() {
    $(this).css('opacity', '0.1').css('background-color', 'red');
}, function() {
    $(this).css('opacity', 'inherit');;
});

$('img[usemap]').hover(function() {
    $(this).css('opacity', '0.5');;
}, function() {
    $(this).css('opacity', '1.0');;
});
*/
$(function () {
            $.fn.maphilight.defaults = {
                fill: true,
                fillColor: 'FFFFFF',
                fillOpacity: 0.1,
                stroke: false,
                strokeColor: 'ffffff',
                strokeOpacity: 0.5,
                strokeWidth: 50,
                fade: true,
                alwaysOn: false,
                neverOn: false,
                groupBy: false,
                wrapClass: true,
                shadow: true,
                shadowX: 0,
                shadowY: 0,
                shadowRadius: 50,
                shadowColor: '0000ff',
                shadowOpacity: 1.0,
                shadowPosition: 'outside',
                shadowFrom: 'fill'
            };
            $('img[usemap]').maphilight();
        });