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>
<img src="http://hellforleathermagazine.com/images/BMW-K1000RS1.jpg" width="25%" />
<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>

JavaScript

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



$("img").click(function() {
    var url = $(this).attr('src');
    var content = '<img src="' + url + '" usemap="#Map" />';
    $.fancybox({
        'title': '2009 BMW S1000RR is official',
        'titlePosition': 'inside',
        'content': content
    });
});