Javascript 交互式CSS图像地图

我是图像地图的新手，想知道如何构造CSS和HTML以将地图中的每个区域视为一个div

我的目标是使用scaleCSS属性扩展特定区域

到目前为止，我已经完成了我的地图——它本质上是一个甜甜圈，每个部分都包裹在一个菱形区域中：

HTML

我还没有添加任何JavaScript

谢谢你的帮助

<div class="imageMap">
  <map name="hybridmap">
    <!--- Staff Section --->
    <div id="staff">
    <area shape="poly" coords="252,2,257,279,494,420,488,145" />
    </div>
  </map>
</div>

.imageMap #staff:hover {
  transform: scale(1.1);
}