响应式图片地图插件不生效原因排查及替代实现方案咨询

代码核心问题 #

你的插件不生效的根本原因是脚本加载顺序错误：

• 你将$('map').imageMapResize()的调用代码放在了jQuery库、imageMapResizer插件的引入语句之前，浏览器按从上到下的顺序执行代码，调用方法时依赖的库和插件都还未加载，自然不会产生任何效果。
• 部分image map适配插件要求调用对象是绑定了usemap的img标签而非map标签，调用对象错误也会导致失效。

修复方案 #

调整JS引入和调用顺序，将所有外部JS引用放到</body>标签之前，插件调用代码放在所有JS引入的末尾，同时增加DOM加载完成的监听保证执行时机正确：

<!-- 原body内的其他代码保持不变 -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
<script src="js/imageMapResizer.js"></script>
<script>
$(document).ready(function(){
  $('map').imageMapResize();
})
</script>
</body>

调整后确认imageMapResizer.js文件路径正确，没有404加载报错即可生效。

入门级替代方案 #

如果你不想依赖第三方插件，可以用相对定位+绝对定位的方案实现响应式可点击区域，实现逻辑更简单，适配更稳定：

<style>
.img-wrapper {
  position: relative;
  width: 99%;
  margin: 0 auto;
}
.img-wrapper > img {
  width: 100%;
  height: auto;
  display: block;
}
.click-region {
  position: absolute;
  /* 所有位置尺寸用百分比设置，按原图参数计算得出 */
  left: 49.27%; /* 原图x轴起点946 / 原图宽度1920 * 100% */
  top: 0.29%; /* 原图y轴起点3 / 原图高度1020 * 100% */
  width: 11.25%; /* 点击区域宽度(1162-946) / 原图宽度1920 * 100% */
  height: 21.08%; /* 点击区域高度(218-3) / 原图高度1020 * 100% */
}
</style>

<div class="img-wrapper">
  <img src="home.png" alt="" width="1920" height="1020">
  <a href="forum.html" class="click-region"></a>
</div>

该方案无任何外部依赖，仅靠原生CSS就可以实现任意缩放下点击区域都和图片位置精准匹配，非常适合入门开发者使用。

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