JSFiddle - React, Tailwind, and code Playground

by jamietre

HTML

<script src="http://www.outsharked.com/scripts/jquery.imagemapster.js"></script>
<div id="tooltip-container" style="display:none;border: 2px solid black; background: #EEEEEE; position:absolute; padding:4px; margin: 4px; -moz-box-shadow: 3px 3px 5px #535353;        -webkit-box-shadow: 3px 3px 5px #535353; box-shadow: 3px 3px 5px #535353; -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px; border-radius: 6px 6px 6px 6px;">
</div>
<div>
    
    
    
<img src="http://www.limit-point.com/products/phototiles/images/phototilesicon.png" usemap="#planetmap" />
<map name="planetmap">
  <area data-key="1,all" shape="rect" coords="0,0,82,80" href="http://www.trendir.com/archives/okhyo-photo-tiles-9.jpg" alt="Sun" />
    <area data-key="2,all"  shape="rect" coords="0,90,82,170" href="http://www.shelterness.com/pictures/amazing-diy-photo-tiles-1-500x373.jpg" />

</map>
    <div class="big"><img src="" /></div>
</div>

CSS

area{position:relative;}
.big{position:absolute; left:100px; top:100px; display:none; }

JavaScript

$('img').mapster({
    toolTipContainer: $('#tooltip-container'),
    mapKey: 'data-key',
    areas: [ {
        key: 'all',
        toolTip: true
    }],
    showToolTip: true,
    onShowToolTip: function(data) {
        if (this.href && this.href!='#') {
            data.toolTip.html('<img src="'+this.href+'">');
        }
        
    }});