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

我正尝试使用坐标将新元素附加到区域地图以确定新元素的位置。我有什么至今：使用精确坐标将元素附加到图像区域地图

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元素放置在地图元素的坐标中。

来源

2013-07-01 Yogzzz

我不明白你的onclick属性内的JavaScript的：'的onclick = “s_objectID =” url.com“;退货。 s_oc this.s_oc（E）：真正的“'。您需要在url.com周围使用单引号才能避免结束onclick =字符串。然后我根本不明白'this.s_oc？this.s_oc（e）：true'应该是什么。请将您的代码放在jsfiddle.com或类似的地方，以便我们可以看到目前的工作。 – foobarbecue

另外，“地图元素的坐标内”是什么意思？你想要新的span元素覆盖整个地图元素吗？或者只是在那里的任何地方？或者你想要一个相对于地图角落的函数？机会是你的答案在这里：http://stackoverflow.com/questions/158070/jquery-how-to-position-one-element-relative-to-another – foobarbecue

我想新的元素被放置在那些坐标的任何地方，并希望得到它纯粹的js doen。 – Yogzzz

我注意到，你已经使用了错误类型的引号字符 - "url.com" - >'url.com' 第一"有效地终止您使用设置的onclick的声明。

接下来，我没有做错误检查。我只查找了第一个<area>标签，但我没有检查它实际上是否是rect，与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); 
}

来源

2013-07-02 03:27:43 enhzflep

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

回答

相关问题