javascript - 使用精确坐标将元素附加到图像区域图

Question

我正在尝试使用坐标将新元素附加到区域地图以确定新元素的位置。到目前为止我所拥有的：

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].getAttribute('href'));
    console.log(hrefs[i].getAttribute('alt'));
    console.log(hrefs[i].parentNode.appendChild(dspan));
}

HTML区域地图：

<map name="spotLightmap-50">
<area alt="Laptops" href="url.com" coords="1,1,357,226" shape="rect" onclick="s_objectID="url.com";return this.s_oc?this.s_oc(e):true">
</map>

说这张地图，我用有坐标1,1,357,226。如何将新的 dspan 元素定位在地图元素的坐标内。

Answer 1

我注意到您使用了错误类型的引号字符 - "url.com"-->'url.com' 第一个"有效地终止了您用于设置 onclick 的语句。

接下来，我没有进行错误检查。我只寻找第一个<area>标签，我没有检查它实际上是一个矩形，而不是一个多边形，它可能有更少或更多的坐标对。

html

<img src="http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6" alt="HTML Map" border="0" usemap="spotLightmap-50"/>
    <map name="spotLightmap-50">
        <area alt="Laptops" href="url.com" coords="50,100,357,226" shape="rect" onclick="s_objectID='url.com';return this.s_oc?this.s_oc(e):true">
    </map>

Javascript

window.addEventListener('load', mInit, false);

function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
function mInit()
{
    var txt = newTxt("Lorus Ipsum");
    var span = newEl('span');
    span.appendChild(txt);

    var map = document.getElementsByName('spotLightmap-50');
    map = map[0];
    var areaTags = map.getElementsByTagName('area');

    var coOrdStr = areaTags[0].getAttribute('coords');
    var coOrds = coOrdStr.split(',');
    var xPos, yPos, width, height;
    xPos = coOrds[0];
    yPos = coOrds[1];
    width = coOrds[2];
    height = coOrds[3];

    //alert("xPos: " + xPos);
    span.style.left = xPos + "px";
    span.style.top = yPos + "px";
    span.style.width = width + "px";
    span.style.height = height + "px";
    span.style.zIndex = 2;
    span.style.position = 'absolute';
    document.body.appendChild(span);
}