JSFiddle - React, Tailwind, and code Playground

HTML

<div style="padding-left:50px; position:relative">
  <img src="http://magascity.ru/images/genplan1.jpg" width="546" height="713" alt="Схема генерального плана" usemap="#genPlan" style="border: none">
  <div class="link1">Детский садик на 80 мест</div>
</div>
<p>
  <map id="genPlan" name="genPlan">
  <area shape="poly" coords="195,2,9,4,56,114,90,235,92,238,133,239,133,152,137,157,141,154,145,155,146,154,153,155,173,139,176,131,176,127,177,113,178,118,182,118,187,119,195,116,197,117,197,4" href="#" onmouseover="showLayer('link1');" onmouseout="hideLayer('link1');">
  </map>
</p>

CSS

.link1 {
  font-family: Calibri, Tahoma, Geneva, sans-serif;
  position: absolute;
  left: 1em;
  top: 2em;
  z-index: 99;
  margin-left: 0;
  width: 250px;
  visibility:hidden;
}

JavaScript

<script language="JavaScript1.2">
<!--
var ie = document.all ? 1 : 0;
var ns = document.layers ? 1 : 0;
var topcss = 165;
if (ns)
topcss = 200;
function showLayer(name)
{
if (ie)

document.all[name].style.visibility = "visible";
else if (ns)
document.layers[name].visibility = "show";

else document.getElementById(name).style.visibility = "visible";	
}
function hideLayer(name)
{
if (ie)
document.all[name].style.visibility = "hidden";
else if (ns)
document.layers[name].visibility = "hide";

else document.getElementById(name).style.visibility = "hidden";	
}
//-->
</script>