JSFiddle - React, Tailwind, and code Playground
by Simon Hi
HTML
<img src="http://gooo.free.fr/jsfiddle/carte.gif" alt="" width="100" height="100" border="0" usemap="#carte">
<map id="carte" name="carte">
<area id="a75" title="Paris" alt="Paris" shape="poly" coords="24,36,23,46,41,54,55,49,50,43,48,32,32,34">
<area id="a92" title="Hauts de Seine" alt="Hauts de Seine" shape="poly" coords="12,53,12,28,25,19,32,29,21,40,29,50,41,57,43,76,37,79,31,75,29,69,18,61">
<area id="a93" title="Seine St Denis" alt="Seine St Denis" shape="poly" coords="26,17,46,15,55,16,67,10,74,19,73,50,53,41,50,31,33,31,31,23,20,20">
<area id="a94" title="Val de Marne" alt="Val de Marne" shape="poly" coords="52,45,71,51,73,76,67,90,56,81,42,75,43,55,55,54">
<div id="p75">Département de Paris</div>
<div id="p92">Département des Haut de Seine</div>
<div id="p93">Département de Seine St Denis</div>
<div id="p94">Département du Val de Marne</div>
</map>CSS
#p75, #p92, #p93, #p94 {display:none;}
#a75:hover ~ #p75 {display:block;}
#a92:hover ~ #p92 {display:block;}
#a93:hover ~ #p93 {display:block;}
#a94:hover ~ #p94 {display:block;}