JSFiddle - React, Tailwind, and code Playground

by Max Shu

HTML

<script src="https://dl.dropboxusercontent.com/u/527648/jquery.zoomtoo.min.js"></script>
<!-- <script type="text/javascript" src="https://raw.github.com/davidjbradshaw/imagemap-resizer/master/js/imageMapResizer.min.js"></script> -->
<div id="zoomtoo" style="width: 600px; height: 300px; position: relative; overflow: hidden; cursor: crosshair;">
    <img src="http://hse.ru/mirror/pubs/share/152193369" style="width: 600px; height: 300px;" data-src="http://fdp.hse.ru/mirror/pubs/share/152193369">
    <map id="map0101" name="map0101"><area alt="" coords="0,0,902,459" href="erudit" shape="rect" target="" title=""> <area alt="" coords="0,460,407,893" href="erudit" shape="rect" target="" title=""> <area alt="" coords="408,0,893,459" href="erudit" shape="rect" target="" title=""> <area alt="" coords="408,460,893,893" href="10class_weekend" shape="rect" target="" title=""> <area alt="" coords="894,0,1161,459" href="9class" shape="rect" target="" title=""> <area alt="" coords="1162,0,1786,459" href="10class" shape="rect" target="" title=""> <area alt="" coords="894,460,1786,893" href="11class" shape="rect" target="" title=""></map>
</div>

JavaScript

$("#zoomtoo").zoomToo({magnify: 0.5});
$("#zoomtoo map + img").attr('usemap','#map0101');