图片映射（Image Map）文本定位偏移及缩放不固定问题求助

问题说明 #

实现图片映射（image map）热区上方显示文本功能时，遇到两个核心问题：

• 标题无法精准居中于圆形area热区
• 窗口缩放时，标题无法固定在热区位置（热区本身定位正常）

用户原始代码如下：

HTML #

<div id="molecule">
    <img src="./images/molecule-total.svg" alt="menu" usemap="#molecule-links">
    <map name="molecule-links">
        <area class="contact" shape="circle" coords="70,100,90" alt="Page1" data-name="Contact">
        <area shape="circle" coords="250,350,150" href="page2.html" alt="Page2" data-name="Home">
    </map>
</div>

CSS #

#molecule {
    height: 80vh;
    width: 100vh;
    padding-left: 141px;
    padding-top: 15px;
    position: relative;
}

.map_title {
  position: absolute;
  z-index: 2;
}

img {
  min-height: 80%;
  max-height: 100%;
}

area {
  cursor: pointer;
  outline-color: white;
}

JavaScript #

function displayLinksName() {
  const area = document.querySelectorAll("area");
  const map = document.querySelector("map")

  area.forEach(function(area){
    let txt = area.getAttribute('data-name')
    let coor = area.getAttribute('coords');
    let coorA = coor.split(',')
    let left = coorA[0];
    let top = coorA[1];
    let links = document.createElement('div');
    links.classList.add("map-title");
    links.innerHTML =  txt;
    links.style.top = top + 'px';
    links.style.left = left + 'px';
    links.style.position = 'absolute';
    links.style.color = 'red';

    map.append(links);
  })
}

核心问题分析 #

1. 居中失效：area的coords是热区的圆心坐标，但CSS的top/left默认以元素左上角为定位基准，直接使用圆心坐标会导致文本左上角对齐圆心，无法居中。
2. 缩放偏移：热区的coords基于图片原始尺寸，而图片会随容器缩放，固定px值的top/left无法跟随图片缩放比例调整位置。

解决方案 #

1. 修正文本居中逻辑 #

通过CSS的transform: translate(-50%, -50%)让文本容器的中心对齐圆心，同时确保文本内部居中。

2. 适配窗口缩放 #

计算图片的缩放比例，将原始coords坐标转换为当前容器中的实际位置，并监听窗口resize事件实时更新。

修改后的完整代码 #

CSS

#molecule {
  height: 80vh;
  width: 100vh;
  padding-left: 141px;
  padding-top: 15px;
  position: relative;
}

.map-title {
  position: absolute;
  z-index: 2;
  color: red;
  text-align: center;
  transform: translate(-50%, -50%); /* 让元素中心对齐定位点 */
  min-width: 80px; /* 避免文本换行后居中异常 */
}

img {
  min-height: 80%;
  max-height: 100%;
  object-fit: contain; /* 保持图片比例 */
  width: 100%; /* 占满容器宽度，确保缩放一致性 */
}

area {
  cursor: pointer;
  outline-color: white;
}

JavaScript

function displayLinksName() {
  const areaElements = document.querySelectorAll("area");
  const moleculeContainer = document.getElementById("molecule");
  const img = moleculeContainer.querySelector("img");

  // 清空旧标题，避免重复创建
  moleculeContainer.querySelectorAll(".map-title").forEach(el => el.remove());

  // 计算图片缩放比例
  const originalWidth = img.naturalWidth;
  const originalHeight = img.naturalHeight;
  const currentWidth = img.offsetWidth;
  const currentHeight = img.offsetHeight;
  const scaleX = currentWidth / originalWidth;
  const scaleY = currentHeight / originalHeight;

  areaElements.forEach(area => {
    const txt = area.getAttribute('data-name');
    const [centerXOriginal, centerYOriginal] = area.getAttribute('coords').split(',').map(Number);
    
    // 转换为当前容器中的实际圆心坐标
    const centerX = centerXOriginal * scaleX;
    const centerY = centerYOriginal * scaleY;

    const titleEl = document.createElement('div');
    titleEl.classList.add("map-title");
    titleEl.textContent = txt;
    titleEl.style.top = `${centerY}px`;
    titleEl.style.left = `${centerX}px`;

    // 添加到容器而非map标签，确保定位正确
    moleculeContainer.appendChild(titleEl);
  });
}

// 初始化与监听缩放
window.addEventListener('load', displayLinksName);
window.addEventListener('resize', displayLinksName);

关键优化点 #

• 类名统一：修正CSS与JS中类名不一致的问题（原map_title改为map-title）
• 定位容器调整：将标题添加到#molecule容器（相对定位），而非map标签，确保定位基准正确
• 缩放比例计算：利用图片原始尺寸与当前尺寸的比例，动态转换热区坐标
• transform居中：通过偏移实现元素中心对齐圆心，完美解决居中问题

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