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>

对于这张地图，我使用的是coords 1,1,357,226。如何将新的dspan元素放置在map元素的坐标中。

Answer 1

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

接下来，我没有做错误检查。我只查找了第一个<area>标签，我没有检查它实际上是一个矩形，而不是一个poly，它可能有更少或更多的co-ord对。

<强> 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);
}

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

1 个答案: