JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://orsas.com/hosted/blogger/fancybox/jquery.fancybox-1.3.4.css">
<script src="http://orsas.com/hosted/blogger/fancybox/jquery.fancybox-1.3.4.js"></script>
    <a href="http://hellforleathermagazine.com/images/BMW-K1000RS1.jpg" class="fancybox" title="2009 BMW S1000RR is official">
        <img src="http://hellforleathermagazine.com/images/BMW-K1000RS1.jpg" width="25%" />
    </a>
    <map name="Map" id="Map">
        <area shape="poly" coords="0,0,0,328,145,328" href="#" />
        <area shape="poly" coords="0,0,180,0,328,328,142,328" href="#" />        
        <area shape="poly" coords="328,328,328,0,180,0" href="#" />    
    </map>
<br /><br />
<i>
    Image curtesy of <a href="http://hellforleathermagazine.com/2008/04/2009-bmw-s1000rr-is-official/">Hell for leather magazine</a>
</i>

CSS

area {
    display: block; 
    background-color: #000000;
}

JavaScript

$('map').click(function(e) {
    e.preventDefault();
    alert('Clicked on the map');
});



    $("a.fancybox").fancybox({
        'titleShow': true,
        'titlePosition': 'inside',
        onComplete: function() {
            $('#fancybox-img').attr('usemap', '#Map');
        }
    });