JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>




<map name="FPMap0" id="FPMap0">
<area item="first" href="#" shape="polygon" coords="347, 79, 349, 201, 449,   248, 540, 204, 541, 82, 448, 34" />
<area item="second" href="#" shape="polygon" coords="560, 81, 562, 206, 660, 255, 756, 208, 758, 81, 659, 31"/>
</map>

<img width="1000" height="250" src="https://placehold.it/400x400" usemap="#FPMap0" alt=""/>

<div id="first">Text1</div>
<div id="second">Text2</div>

<script>
    $('area').on('click',function() {
    $('div').hide();
    $('#' + $(this).attr('item')).show();
});
</script>