如何检测图像链接坐标？

Question

我有一个关于在图像映射链接中放置div的问题

我有一个包含多个链接的图片

我想在图片链接的顶部放置一个div。

<img id='project' src='test.png' USEMAP = '#test1'/>

<map name='test1'>
    <area class='btn' shape="rect" coords="36,20,55,34" href="#"/>
    <area class='btn' shape="rect" coords="18,37,35,56" href="#"/>
    <area class='btn' shape="rect" coords="54,38,72,56" href="#"/>
    <area class='btn' shape="rect" coords="31,61,57,75" href="#"/>
</map>

如何在地图上找到正确的坐标并在其上放置一个div？

非常感谢！