网站mouseover函数引发地图图片偏移及hitbox异常问题求助

网站内有一张基础空白地图（#base），搭配四个彩色方块热区，鼠标悬停方块时会切换显示对应颜色的路线图并隐藏基础图，但切换后图片出现位置偏移，导致其他方块的热区（hitbox）无法正常触发交互。

核心原因分析 #

1. 图片尺寸不统一：基础图与各路线图的宽高不一致，切换时元素尺寸变化引发布局偏移，热区坐标与实际图片位置脱节。
2. 流式布局干扰：图片使用默认流式布局，显示/隐藏操作改变了文档流结构，导致后续元素位置变动，热区仍基于原始位置计算，出现错位。
3. 热区未重新适配：切换图片后未重新调用imageMapResize()，热区坐标没有适配新图片的尺寸或位置。

解决方案 #

步骤1：统一所有地图图片尺寸 #

检查#base、#bh、#mariana、#ob、#transfer所有图片的宽高，确保它们的像素尺寸完全一致，从根源避免布局跳动。

步骤2：用CSS固定图片容器，实现重叠定位 #

给图片包裹一个容器，通过相对+绝对定位让所有地图重叠在同一位置，切换显示/隐藏时不改变文档流：

.map-container {
  position: relative;
  width: 1200px; /* 替换为你的基础图实际宽度 */
  height: 900px; /* 替换为你的基础图实际高度 */
}
.map-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* 默认仅显示基础图 */
.map-container img:not(#base) {
  display: none;
}

对应HTML结构调整：

<div class="map-container">
  <img id="base" src="你的基础图路径" usemap="#legenda" alt="基础地图">
  <img id="bh" src="BH路线图路径" alt="BH路线">
  <img id="mariana" src="Mariana路线图路径" alt="Mariana路线">
  <img id="ob" src="OB路线图路径" alt="OB路线">
  <img id="transfer" src="Transfer路线图路径" alt="Transfer路线">
</div>

步骤3：修改JS代码，切换后重新计算热区 #

每次图片切换后调用imageMapResize()，确保热区坐标适配当前图片：

$('#legenda area').each(function () {
  $(this).mouseover(function (e) {
    const targetId = "#" + $(this).attr('alt');
    // 隐藏所有地图，显示目标路线图
    $(".map-container img").hide();
    $(targetId).show();
    // 重新适配热区
    imageMapResize();
  });

  $(this).mouseout(function (e) {
    // 切回基础图
    $(".map-container img").hide();
    $("#base").show();
    imageMapResize();
  });
});

可选优化：单图片切换src（更简洁） #

如果所有图片尺寸一致，可以只保留一个img元素，通过切换src属性实现效果，避免多元素定位问题：

$('#legenda area').each(function () {
  const $baseImg = $("#base");
  const baseSrc = $baseImg.attr('src');
  // 预先存储各路线图地址
  const mapSrcs = {
    bh: $("#bh").attr('src'),
    mariana: $("#mariana").attr('src'),
    ob: $("#ob").attr('src'),
    transfer: $("#transfer").attr('src')
  };
  // 移除多余图片元素
  $("#bh, #mariana, #ob, #transfer").remove();

  $(this).mouseover(function (e) {
    const alt = $(this).attr('alt');
    $baseImg.attr('src', mapSrcs[alt]);
    imageMapResize();
  });

  $(this).mouseout(function (e) {
    $baseImg.attr('src', baseSrc);
    imageMapResize();
  });
});

关键注意事项 #

• 所有地图图片必须保持相同的宽高比和像素尺寸，否则热区必然错位。
• 每次图片切换后必须调用imageMapResize()，确保热区坐标实时适配。
• 用绝对定位固定图片位置，彻底避免显示/隐藏操作干扰文档流。

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