JSFiddle - React, Tailwind, and code Playground

by robert_schutt

HTML

<script src="http://davidlynch.org/projects/maphilight/jquery.maphilight.js"></script>
<img src="http://davidlynch.org/projects/maphilight/docs/demo_simple.png" width="420" height="300" class="map" usemap="#simple">
<map name="simple">
    <!--
    <area href="#" shape="poly" coords="47,62,106,61,134,72,135,118,30,116" alt="Link" title="Default behavior"/>
    <area href="#" shape="poly" coords="32,157,133,157,127,192,127,211,28,211" alt="Link" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"ff0000","fillOpacity":0.6}' title="Metadata'd up a bit"/>
    -->

    <area id="squidhead" href="#" shape="rectangle" coords="250,72,330,132" alt="Octoface" data-maphilight='{"stroke":false,"fillColor":"ff0000","fillOpacity":0.6}' title="Metadata'd up a bit"/>

    <area href="#" shape="circle" coords="280,100,6" data-maphilight='{"stroke":false,"fillColor":"ffff00","fillOpacity":0.8}' />
    <area href="#" shape="circle" coords="302,100,6" data-maphilight='{"stroke":false,"fillColor":"ffff00","fillOpacity":0.8}' />

    <!--
    <area href="#" shape="poly" coords="219,190,225,175,237,157,239,148,245,142,251,140,263,140,265,139,310,139,311,145,364,182,363,201,343,221,333,213,329,181,313,177,330,234,295,231,292,174,279,176,282,204,269,220,255,206,267,167,235,193" alt="Legs" data-maphilight='{"stroke":false,"fillColor":"000000","fillOpacity":1,"alwaysOn":true}' title="Metadata'd up a bit"/>
    -->
</map>

JavaScript

$(function() {
        $('.map').maphilight();
    });