JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Région Midi-Pyrénées secteur Toulouse et environ</a></li>
    <li><a href="#tabs-2">Région Midi-Pyrénées secteur Nord-Est</a></li>
  </ul>
  <div id="tabs-1">
    <div class="mapter_tlse_environ">
      <img src="http://www.routard.com/images_contenu/partir/destination/toulouse/carte/toulouse.gif" id="map-image1" alt="" style="vertical-align: middle; text-align: center;" alt="" usemap="#map" />
      <map name="map">
        <area shape="poly" coords="370, 867, 382, 865, 384, 874, 370, 878" />
        <area shape="poly" coords="230, 787, 245, 795, 240, 803, 223, 794" />
        <area shape="poly" coords="348, 697, 362, 695, 363, 707, 349, 708" />
        <area shape="poly" coords="359, 598, 375, 610, 368, 618, 352, 606" />
        <area shape="poly" coords="86, 359, 96, 362, 91, 373, 81, 368" />
        <area shape="poly" coords="140, 389, 147, 391, 142, 399, 135, 394" />
        <area shape="poly" coords="183, 409, 180, 416, 173, 413, 177, 405" />
        <area shape="poly" coords="207, 418, 214, 421, 208, 432, 199, 425" />
        <area shape="poly" coords="238, 438, 234, 445, 229, 441, 233, 435" />
      </map>
    </div>
  </div>
  <div id="tabs-2">
    <div class="mapter_midipy">
      <img src="http://www.detectimmobilier.com/images/chasseur-immobilier-midi-pyrenees.gif" id="map-image2" style="width: 2352px; max-width: 100%; height: auto;" alt="" usemap="#map" />
      <map name="map">
        <area shape="poly" coords="0, 24, 100, 50, 280, 264, 56, 261" />
      </map>
    </div>
  </div>
</div>

CSS

area {
  cursor: pointer;
  border: solid 1px red;
}

JavaScript

$(function() {
   $("#tabs").tabs();
   $('#tabs area').mouseover(function() {
     var index = $(this).index('#tabs area');
     console.log(index);
   });
 });