javascript - 使用区域地图元素上的精确坐标将 div 附加到 parentNode

Question

我有一个函数，它返回一个区域地图标签的 parentNode 和坐标：

 <img src ="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map> 

Javascript函数：

var count = document.createTextNode("FooBar");
var dspan = document.createElement("span");
dspan.appendChild(count);

var hrefs = document.querySelectorAll("area");

for (var i = 0; i < hrefs.length; i++) {
    console.log(hrefs[i].getAttribute('coords'));
    console.log(hrefs[i].parentNode);
    hrefs[i].getAttribute('href');
}

如何使用坐标将dspan元素附加到hrefs[i]parentNode以定位元素。我需要将新元素放置在区域形状内的任何位置。hrefs[i]dspan