使用区域地图元素上的精确坐标将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]元素附加到hrefs[i] parentNode以定位dspan元素。我需要将新元素放置在区域形状的任何位置。