如果图片是动态加载的，而不是直接写在HTML代码中，图片上的标签就不起作用

前端开发 2026-07-10

首先，我制作了一个简单的HTML文件，配有图像映射：

<!doctype html>
<html><head><meta charset="utf-8"><title>xxx</title></head>
<body>  
  <img src="image.png" alt="" usemap="#mymap">
  <map name="mymap">    
    <area shape="rect" coords="0,0,100,100" href="#" alt="A" onclick="try()">   
  </map>    
</body>
</html>

接着，为了网页设计的需要，我尝试用一个同样情境的动态构造：在我的网页中的某处： <div id="imagemap" style="border: 3px solid black;"></div>

接着执行一个JavaScript函数：

var imagemap        = document.getElementById("imagemap");
var imagemapElement = '<div><img src="image.png" usemap="#mymap" alt="">'; 
imagemapElement += '<map name="mymap"><area shape="rect" coords="0,0,100,100" href="#" alt="A" onclick="try()"></div>';
var div.innerHTML = imagemapElement;
imagemap.appendChild(div);
imagemap.style.display = "inline";

在第二种情况下，行为非常奇怪，因为 onclick 链接只在图像的某些区域被触发，而在其他区域则没有反应。让我解释：映射区域是0, 0, 100, 100，即左上角的一个正方形，但是指针的位置以及随之而来的按钮点击在大约0 到50像素之间会触发，而如果指针移动到超过50像素的区域，该区域就不再处于激活状态。

我尝试将映射移到图像的不同区域，总是得到同样的结果：请记住，在上部区域（大约在50像素以上的位置）一切正常，但在图像的中部区域无法让它检测到活动区域，在图像的下部区域可点击区域又恢复。我真的无法解释这种行为。有人知道这可能是什么原因吗？有什么建议去哪里查看或测试吗？

我也尝试了 z-index，并使用 transparent button 代替映射。结果也是同样的行为。似乎图像的中央大块区域（一个常见的 jpg 图像）处于非活动状态。

解决方案

你也可以使用 createContextualFragment() 方法……

let Dom_Frag = new Range().createContextualFragment(`
  <img src="https://picsum.photos/id/691/400/300" usemap="#mymap">
  <map name="mymap">
    <area shape="circle" coords="316,226,50">
  </map>`);

Dom_Frag.querySelector('area').addEventListener('click',e=>
  {
  alert('this is not a coffee... (this a picture)');
  })

document.body.append(Dom_Frag);