通过 javascript 动态创建图像映射

Question

UPDATE 我在调试器中比较了对象，似乎 map 元素不是 img 的子元素。但是，删除 img.appendChild(map); 仍然无法正常工作。为了完整 - 除了接受的答案，我还必须添加 div.appendChild(map); 以便地图有父项。

我正在尝试动态创建图像区域图。我有以下代码的 jsFiddle：Here。我已经成功地能够生成静态地图并通过 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>

Answer 1

您可以使用下面的代码。如果您想更改 co-ordinates，您可以在 body 加载或其他一些事件上调用 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>

谢谢

Answer 2

您需要使用 setAttribute 而不是点符号来设置 usemap 属性。即，将最后一行更改为：

img.setAttribute('usemap', "#myMap");

我不确定为什么这是必要的，也许有人可以补充说明为什么不能使用点表示法设置此标准属性并且需要 setAttribute.

另见这个问题，特别是第二个答案：When to use setAttribute vs .attribute= in JavaScript?

P.S。如果您的应用程序使用大量 DOM 操作，那么我建议使用 DOM 库，例如 jQuery 或 Zepto；他们会为您解决此类问题以及任何浏览器兼容性问题。

通过 javascript 动态创建图像映射

Dynamically create Image map via javascript

javascript

imagemap