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" usemap="#Map" />
    <br />
    Try clicking image map.....
    <map name="Map" id="Map">
        <area shape="poly" coords="0,0,0,328,145,328" href="http://www.google.com" class="fancybox" title="Google" rel="iframe" />
        <area shape="poly" coords="0,0,180,0,328,328,142,328" href="http://farm6.static.flickr.com/5177/5574889454_b0a8c7845b.jpg" class="fancybox" title="EBR 1190 Typhon hits the track" rel="image" />        
        <area shape="poly" coords="328,328,328,0,180,0" href="http://www.ask.com" />
    </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 > area.fancybox').click(function(e) {
        e.preventDefault();
        var url = $(this).attr('href');
        var title = $(this).attr('title');
        var type = $(this).attr('rel');
        $.fancybox({
            'title': title,
            'titlePosition': 'inside',
            'href' : url,
            'type' : type
        });
    });