JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.imagemapster.min.js"></script>
<div class="map" style="display: block; background-image: url(&quot;http://park-ortachala.ga/aa/1.png&quot;); background-size: contain; position: relative; padding: 0px; width: 850px; height: 850px;">
<canvas style="width: 850px; height: 850px; position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px; opacity: 1;" height="850" width="850"></canvas><img src="1.png" usemap="#image-map" class="map maphilighted" style="opacity: 1e-10; position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px;"></div>

<map name="image-map">

    <area data-blok="A" data-floor="1" coords="387,628,387,654,218,673,150,613,152,593,220,647" shape="poly" target="_top" href="http://park-ortachala.ga/%e1%83%90%e1%83%98%e1%83%a0%e1%83%a9%e1%83%98%e1%83%94%e1%83%97-%e1%83%a1%e1%83%90%e1%83%a1%e1%83%a3%e1%83%a0%e1%83%95%e1%83%94%e1%83%9a%e1%83%98-%e1%83%91%e1%83%98%e1%83%9c%e1%83%90/">
    <area data-blok="A" data-floor="2" coords="388,595,387,622,220,640,152,589,152,567,216,610" shape="poly" target="_top" href="http://park-ortachala.ga/%e1%83%90%e1%83%98%e1%83%a0%e1%83%a9%e1%83%98%e1%83%94%e1%83%97-%e1%83%a1%e1%83%90%e1%83%a1%e1%83%a3%e1%83%a0%e1%83%95%e1%83%94%e1%83%9a%e1%83%98-%e1%83%91%e1%83%98%e1%83%9c%e1%83%90/">
    <area data-blok="A" data-floor="3" coords="387,591,226,604,192,589,160,566,161,546,192,566,226,576,387,564" shape="poly" target="_top" href="http://park-ortachala.ga/%e1%83%90%e1%83%98%e1%83%a0%e1%83%a9%e1%83%98%e1%83%94%e1%83%97-%e1%83%a1%e1%83%90%e1%83%a1%e1%83%a3%e1%83%a0%e1%83%95%e1%83%94%e1%83%9a%e1%83%98-%e1%83%91%e1%83%98%e1%83%9c%e1%83%90/">
    <area data-blok="A" data-floor="4" coords="387,532,388,558,226,568,192,558,162,540,161,519,193,535,226,542" shape="poly" target="_top"...

JavaScript

$('#myimage').mapster({
    fillColor: 'ff0000',
    fillOpacity: 0.3
});