动态构建Image Map后点击区域异常的问题求助

首先，结合你描述的异常表现和动态构建图像映射的代码，核心问题大概率是图像显示尺寸与原始尺寸不匹配，再加上代码里的语法/结构错误共同导致的。下面一步步拆解问题并给出修复方向：

一、先修复代码中的明显错误 #

你的JavaScript代码存在几个语法和DOM结构问题，这些会先导致浏览器解析异常，进而影响图像映射的正常关联：

1. 未正确创建div元素
   你直接写了var div.innerHTML = imagemapElement;，但div变量根本没被初始化。正确写法应该先创建div节点：

   var div = document.createElement('div'); // 先创建div元素
   div.innerHTML = imagemapElement;
   

2. 标签闭合错误
   拼接的HTML字符串里，<map>标签没有闭合，还错误地用</div>来结束map，这会让浏览器自动修正DOM结构，破坏map和img的关联关系：

   // 错误写法
   imagemapElement += '<map name="mymap"><area shape="rect" coords="0,0,100,100" href="#" alt="A" onclick="try()"></div>';
   // 正确写法：闭合map标签，再结束外层div
   imagemapElement += '<map name="mymap"><area shape="rect" coords="0,0,100,100" href="#" alt="A" onclick="myTryFunc()"></map></div>';
   

3. 使用JavaScript关键字作为函数名
   try是JS的保留关键字，不能当作函数名使用，这会导致点击时触发语法错误。把函数名改成myTryFunc这类自定义名称即可。

二、核心问题：图像显示尺寸与原始尺寸不匹配 #

你描述的“上部约50像素正常、中部失效、下部恢复”的异常，完全符合图像被CSS缩放但coords仍基于原始尺寸的场景：

• 图像映射的coords属性是基于图像的原始像素尺寸计算的，而非浏览器渲染后的显示尺寸。
• 举个例子：如果你的image.png原始尺寸是200px×200px，但通过容器CSS被缩放到100px×100px显示，那么你设置的0,0,100,100区域，在显示时就会缩小为左上1/4区域（对应显示的0-50px范围），中间区域的实际像素对应原始图的100px左右，不在你的coords范围内，自然无法触发点击。

排查与修复方法： #

1. 确认图像尺寸差异
   打开浏览器开发者工具（F12），查看img元素的naturalWidth/naturalHeight（原始尺寸）和offsetWidth/offsetHeight（显示尺寸）。如果两者不一致，就是缩放导致的问题。
2. 修正coords的计算逻辑
   计算缩放比例：scaleX = img.offsetWidth / img.naturalWidth; scaleY = img.offsetHeight / img.naturalHeight;，再基于显示尺寸转换原始坐标。比如你想在显示的0-100px区域设置映射，原始坐标应为0,0, 100/scaleX, 100/scaleY。
3. 固定图像显示尺寸
   给img元素设置明确的width和height属性，让显示尺寸和原始尺寸一致，这样coords就能直接对应显示区域：

   <img src="image.png" usemap="#mymap" alt="" width="200" height="200">
   

三、其他排查方向 #

如果上面的修复后问题仍存在，可以试试这些方法：

• 检查DOM结构正确性：用开发者工具查看动态生成的img和map是否正确关联，map是否在DOM中正常存在，area标签的coords是否准确。
• 排查遮挡元素：检查容器或父元素是否有其他元素（比如伪元素、绝对定位元素）遮挡了图像中部，可通过开发者工具的“元素选择”功能查看鼠标位置对应的元素。
• 改用动态事件绑定：放弃内联onclick，改用JS动态绑定事件，避免DOM解析时的异常：

  // 动态创建area后绑定事件
  const area = div.querySelector('area');
  area.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认跳转
    myTryFunc(); // 执行你的逻辑
  });
  

内容的提问来源于stack exchange，提问作者Lode Fabri