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

【问题标题】：Appending element to image area map using exact coordinates使用精确坐标将元素附加到图像区域图
【发布时间】：2013-07-01 20:13:00
【问题描述】：

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

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 元素定位在地图元素的坐标内。

【问题讨论】：

我不理解您的 onclick 属性中的 javascript：onclick="s_objectID="url.com";return this.s_oc?this.s_oc(e):true"。您需要在 url.com 周围使用单引号，以避免结束 onclick= 字符串。然后我根本不明白this.s_oc?this.s_oc(e):true 应该是什么。请将您的代码放到 jsfiddle.com 或类似网站上，以便我们了解目前的工作情况。
另外，“在地图元素的坐标内”是什么意思？您希望新的 span 元素覆盖整个地图元素吗？或者只是在那里的任何地方？或者你想要一个相对于地图一角定位它的函数？您的答案可能在这里：stackoverflow.com/questions/158070/…
我希望将新元素放置在这些坐标中的任何位置，并希望在纯 js 中完成。

标签： javascript css

【解决方案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);
}

【讨论】：