JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<img src="http://www.limit-point.com/products/phototiles/images/phototilesicon.png" usemap="#planetmap" />
<map name="planetmap">
  <area shape="rect" coords="0,0,82,80" href="http://www.trendir.com/archives/okhyo-photo-tiles-9.jpg" alt="Sun" />
    <area shape="rect" coords="0,90,82,160" 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

$('area').hover(function(){
    var url = $(this).attr('href');
   $('.big img').attr('src', url).fadeToggle();
    $('.big').slideToggle();
});