可调整大小的图片地图实现鼠标悬停显示GIF效果

嘿，这个桌面热点互动的想法超有意思！完全不需要修改image-map-resizer的源代码，咱们可以通过额外的HTML结构、CSS样式和jQuery逻辑来实现需求。下面是一步步的具体实现：

1. 扩展HTML结构 #

首先在你的.map容器里，给每个热点区域添加对应的GIF容器，初始状态设为隐藏：

<div class="map">
  <img src="img/flatlay_sample.jpg" class="bg" id="bestmap" alt="image map" usemap="#image_map" width="1500" height="1101" orgWidth="1500" orgHeight="1101">
  <map name="image_map" id="bestmap">
    <area id="phone" alt="" title="phone" href="http://www.image-maps.com/" shape="poly" coords="869,356,983,270,1190,518,1072,617,958,484" style="outline-color:red;" target="_self" />
    <area id="coffee" alt="" title="coffee" href="http://www.image-maps.com/" shape="poly" coords="370,604,408,540,433,611,508,659,521,755,461,835,335,837,285,771,297,660" style="outline:none;" target="_self" />
  </map>
  <!-- 新增的GIF容器，ID对应热点area的ID + "-gif" -->
  <div class="gif-overlay" id="phone-gif">
    <img src="img/phone-hover.gif" alt="Phone hover animation">
  </div>
  <div class="gif-overlay" id="coffee-gif">
    <img src="img/coffee-hover.gif" alt="Coffee hover animation">
  </div>
</div>

2. 编写响应式CSS样式 #

关键要让GIF容器能跟随图片地图自适应缩放，同时不干扰热点的鼠标事件：

.map {
  position: relative;
  display: inline-block; /* 让容器自动适配图片的宽度 */
  max-width: 100%; /* 确保不会超出浏览器窗口 */
}

.bg {
  width: 100%;
  height: auto; /* 保持图片的响应式比例 */
}

.gif-overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: none; /* 初始隐藏GIF */
  width: 100%; /* 跟随容器等比例缩放 */
  height: auto;
  pointer-events: none; /* 关键：避免GIF遮挡热点的鼠标事件 */
}

.gif-overlay img {
  width: 100%;
  height: auto; /* 让GIF保持自身比例的同时铺满容器 */
}

可选：精准定位局部GIF #

如果你不想让GIF全屏显示，只想在热点区域内展示动画，可以根据热点的coords计算出相对位置的百分比。比如针对coffee热点：

• 先找出它的边界框：最小X=285，最大X=521；最小Y=540，最大Y=837
• 计算百分比（基于原图尺寸1500x1101）：

  #coffee-gif {
    left: calc(285 / 1500 * 100%);
    top: calc(540 / 1101 * 100%);
    width: calc((521 - 285) / 1500 * 100%);
    height: calc((837 - 540) / 1101 * 100%);
  }
  

这样GIF就只会在咖啡杯的热点区域内显示，更贴合需求。

3. 绑定jQuery交互逻辑 #

利用插件处理后的响应式热点，绑定鼠标移入/移出事件来控制GIF的显示和隐藏：

$(document).ready(function() {
  // 初始化响应式图片地图（保留你原有的代码）
  $('map').imageMapResize();

  // 鼠标移入热点时显示对应GIF
  $('area').on('mouseenter', function() {
    const targetGifId = `${$(this).attr('id')}-gif`;
    $(`#${targetGifId}`).show();
  });

  // 鼠标移出热点时隐藏对应GIF
  $('area').on('mouseleave', function() {
    const targetGifId = `${$(this).attr('id')}-gif`;
    $(`#${targetGifId}`).hide();
  });
});

关键说明 #

• 无需修改插件代码：image-map-resizer只负责动态调整热点的坐标，咱们的交互逻辑完全独立于插件运行，不会冲突。
• GIF适配技巧：建议把GIF制作成和原图相同的尺寸（1500x1101），这样缩放时动画位置能完美和热点对齐；如果用局部GIF，记得按上面的方法计算百分比位置。
• 鼠标事件兼容：pointer-events: none是必须的，否则GIF显示后会遮挡下方的热点，导致mouseleave事件无法触发。

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