JSFiddle - React, Tailwind, and code Playground

by jamietre

HTML

<div id="wrapper">
    <img style="width:400px; height:240px;"
src="http://www.outsharked.com/imagemapster/examples/images/beatles_basic.jpg">
<div style="position: absolute; padding:40px;width:400px;height:240px; top: 0; left: 0; color: #ff0000; font-weight: bold; font-size: 16px;">Hey here's some text<br>
    Hey here's some text<br>
    Hey here's some text<br>
</div>
<img style="opacity:0;position: absolute;width:400px; height:240px;top: 0; left: 0;"
usemap="#beatles-map" src="http://www.outsharked.com/imagemapster/examples/images/beatles_basic.jpg">

<div id="alert-container" style="display:none;"><b>The mouse is in an area</b></div>
</div>
<map name="beatles-map">
    <area shape="rect" data-name="paul,all" coords="36,46,121,131" href="#" />
    <area shape="rect" data-name="ringo,all" coords="113,76,198,161" href="#" />
    <area shape="rect" data-name="john,all" coords="192,50,277,135" href="#" />
    <area shape="rect" data-name="george,all" coords="262,60,347,145" href="#" />
</map>

JavaScript

$('area').bind('mouseover',function() {
    $('#alert-container').show();
}).bind('mouseout',function() {
    $('#alert-container').hide();
});