Question

更新我比较了调试器中的对象，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

您可以使用以下代码。如果你想改变坐标，你可以在身体负荷或其他一些事件上调用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动态创建图像映射

2 个答案: