JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://htmlbook.ru/files/images/content/021_1.gif" usemap="#map" alt="Навигация">
    <map name="map"> 
        <area id="a1" shape="poly" alt="Закладка 2" 
   coords="210,27, 203,9, 202,6, 197,2, 192,1, 120,1, 115,2, 110,6, 112,9, 119,27, 119,32, 211,32, 210,27" 
   href="2.html">
    <area id="a2" shape="poly" alt="Закладка 3" 
   coords="302,27, 295,9, 293,6, 289,2, 283,1, 212,1, 206,2, 202,6, 203,9, 210,27, 211,32, 284,32, 303,32, 302,27" href="3.html">
    <area id="a3" shape="poly" alt="Закладка 4" 
   coords="302,27, 303,32, 394,32, 393,27, 386,9, 382,3, 375,1, 303,1, 298,2, 293,6, 295,9, 302,27" 
   href="4.html">
  </map>

JavaScript

$('#a1').click(function(e){
    e.preventDefault();
    alert($(this).attr('alt'));
});
$('#a2').click(function(e){
    e.preventDefault();
    alert($(this).attr('alt'));
});
$('#a3').click(function(e){
    e.preventDefault();
    alert($(this).attr('alt'));
});