JSFiddle - React, Tailwind, and code Playground

HTML

<img src='http://2.bp.blogspot.com/_Y-imhcXPDvI/RvI3-Z9wEmI/AAAAAAAAAjk/L8KC7O6M6ZA/s320/grid3x3.jpg' usemap="#map" />

<map name="map" id="map">
    <area shape="rect" coords="4,2,34,33" href="#" />
    <area shape="rect" coords="36,4,67,32" href="#" />
    <area shape="rect" coords="68,5,99,34" href="#" />
    <area shape="rect" coords="3,36,34,67" href="#" />
    <area shape="rect" coords="69,35,100,68" href="#" />    
   <area shape="rect" coords="69,70,99,97" href="#" />
    <area shape="rect" coords="3,70,34,97" href="#" />
     <area shape="rect" coords="37,68,67,97" href="#" />
    
  </map>
  <button id="btn_1" >Btn 1</button>
  <button id="btn_2">Btn 2</button>
  <button id="btn_3">Btn 3</button>
  <button id="btn_4">Btn 4</button>
  <button id="btn_5">Btn 5</button>
  <button id="btn_6">Btn 6</button>
  <button id="btn_7">Btn 7</button>
  <button id="btn_8">Btn 8</button>

CSS

button { display:none}

JavaScript

$(document).ready(function() {

    $("#map area").mouseenter(function() {
        var idx = $("#map area").index(this);
        $("#btn_"+(idx+1)).show();
        return false;
    }).mouseleave(function() {
        $("button").hide()
        return false;
    });

});