通过javascript动态创建图像映射
UPDATE我比较了调试器中的对象，似乎通过javascript动态创建图像映射,javascript,imagemap,Javascript,Imagemap,UPDATE我比较了调试器中的对象，似乎map元素不是img的子元素。然而，删除img.appendChild（map）仍然无法使其工作。为了完整-连同接受的答案，我必须添加div.appendChild（map）以便贴图具有父对象 我正在尝试动态创建图像区域地图。我有以下代码的一部分：。我已经成功地生成了一个静态地图，并通过js在该区域绑定了鼠标悬停，但我似乎无法从头开始创建地图。我使用的是纯js。任何帮助都将不胜感激 <head> <script> funct
mapimgimg.appendChild（map）仍然无法使其工作。为了完整-连同接受的答案，我必须添加div.appendChild（map）以便贴图具有父对象
我正在尝试动态创建图像区域地图。我有以下代码的一部分：。我已经成功地生成了一个静态地图，并通过js在该区域绑定了鼠标悬停，但我似乎无法从头开始创建地图。我使用的是纯js。任何帮助都将不胜感激
<head>
<script>
function function1() {
var img = document.getElementById("myImg");
var map = document.createElement("map");
map.name = "myMap";
var area = document.createElement("area");
area.shape = "rect";
area.coords = "0,0,100,50"
area.onmouseover = function(){alert("over")};
map.appendChild(area);
var div = document.getElementById("div");
div.appendChild(map);
img.usemap = "#myMap";
}
</script>
</head>
<body>
<div id="div">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"
id="myImg"
alt="Image"
width="350"
height="150">
<br>
<input type="button" value="Make area active" onClick="function1();">
</div>
</body>
函数function1（）{
var img=document.getElementById（“myImg”）；
var map=document.createElement（“map”）；
map.name=“myMap”；
var区域=document.createElement（“区域”）；
area.shape=“rect”；
area.coords=“0,0100,50”
area.onmouseover=函数（）{alert（“over”）}；
地图.儿童（地区）；
var div=document.getElementById（“div”）；
子分区（地图）；
img.usemap=“#myMap”；
}
您可以使用下面的代码。如果您想更改坐标，可以在body-load或其他事件上调用javascript
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="1.htm" alt="1">
<area shape="circle" coords="90,58,3" href="2.htm" alt="2">
<area shape="circle" coords="124,58,8" href="3.htm" alt="3">
</map>
谢谢您可以使用下面的代码。如果您想更改坐标，可以在body-load或其他事件上调用javascript
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="1.htm" alt="1">
<area shape="circle" coords="90,58,3" href="2.htm" alt="2">
<area shape="circle" coords="124,58,8" href="3.htm" alt="3">
</map>
谢谢您需要使用setAttribute
而不是点符号来设置usemap
属性。也就是说，将最后一行更改为：
img.setAttribute('usemap', "#myMap");
我不知道为什么这是必要的，也许有人可以澄清为什么不能使用点符号设置这个标准属性，并且需要setAttribute
另见此问题，特别是第二个答案：
另外，如果您的应用程序使用了大量的DOM操作，那么我建议使用一个DOM库，比如jQuery或Zepto；它们将为您解决此类问题以及任何浏览器兼容性问题。您需要使用setAttribute
而不是点符号来设置usemap
属性。也就是说，将最后一行更改为：
img.setAttribute('usemap', "#myMap");
我不知道为什么这是必要的，也许有人可以澄清为什么不能使用点符号设置这个标准属性，并且需要setAttribute
另见此问题，特别是第二个答案：
另外，如果您的应用程序使用了大量的DOM操作，那么我建议使用一个DOM库，比如jQuery或Zepto；他们将为您解决此类问题以及任何浏览器兼容性问题。谢谢您的回复。我需要用js动态创建地图，而不是用HTML编码。我已经能够让它像你一样工作，只是为了测试概念，但这还不够。@mseifer问题是，当你想动态创建坐标系时，你只需要修改DOM，需要将新区域及其形状添加到地图中，它就会工作，你想让我为你创建一个示例吗？是的，请。请注意，在我的应用程序中，我甚至没有用于图像的HTML。它是100%js，从头开始创建每个元素。加载图像后，我返回并将地图添加到其中。因此，对于这个例子，除了图片之外，我不能有任何HTML。谢谢你的回复。我需要用js动态创建地图，而不是用HTML编码。我已经能够让它像你一样工作，只是为了测试概念，但这还不够。@mseifer问题是，当你想动态创建坐标系时，你只需要修改DOM，需要将新区域及其形状添加到地图中，它就会工作，你想让我为你创建一个示例吗？是的，请。请注意，在我的应用程序中，我甚至没有用于图像的HTML。它是100%js，从头开始创建每个元素。加载图像后，我返回并将地图添加到其中。因此，对于这个示例，除了图像之外，我不能有任何HTML。谢谢！我将阅读SetAttribute上的链接信息。为了记录，我还必须添加div.appendChild（map）这样地图就有了一个家长。谢谢！我将阅读SetAttribute上的链接信息。为了记录，我还必须添加div.appendChild（map）以便映射具有父级。