GitHub博客中图片映射（image map）区域链接失效求助

一开始我以为问题出在为实现响应式网页添加的脚本上，但移除脚本后，图片映射的区域链接还是没法正常工作。今天是我学习的第三天，为了装饰博客，我花了一整天排查这个问题。

最初的代码片段 #

<img src="../images/map.png" usemap="#image-map">

<map name="image-map">
    <area target="_blank" alt="img" title="facebook" href="https://www.facebook.com/" coords="4734,3163,6576,3722" shape="rect">
</map>

尝试使用响应式图片映射脚本后的代码 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>
  <style>  
    img {
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <!-- 存在语法错误：多余的 `<` 符号 -->
  <img src="../images/2023-01-29-0001/map.png" usemap="#instaMap" width="500" height="500">
  <map name="instaMap">
    <area shape="rect" coords="4673,5113,5337,5737" href="https://www.instagram.com/">
    
  </map>
  <script>
    $(document).ready(function() {
      $('img[usemap]').rwdImageMaps();
    });
  </script>
</body>
</html>

问题排查方向 #

• 坐标错位：coords值是基于原图的实际尺寸，但页面中图片被缩放（比如设置了max-width:100%或指定了width/height），导致点击区域和显示区域不匹配。即使移除响应式脚本，尺寸不一致的情况下坐标依然失效。需根据图片显示尺寸重新计算坐标，或确保脚本正常生效适配缩放。
• 语法错误：第二段代码<body>内有多余的<符号，会导致HTML解析异常，先修复该错误。
• 图片路径：检查图片src路径是否正确，确保图片能正常加载，图片加载失败会直接导致映射功能失效。

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