HTML area标签矩形热区坐标计算完整教程-html教程-PHP中文网

area标签rect热区坐标须按图片原始尺寸手动量取x1,y1,x2,y2（x1

html area标签矩形热区坐标计算完整教程

area 标签的 rect 热区坐标不是“计算”出来的，而是按图片原始尺寸（naturalWidth/naturalHeight）手动量取并填写的四个像素值；填错顺序、越界、或受 CSS 缩放干扰，热区就点不中——浏览器从不报错，只沉默失效。

rect 坐标格式必须是 `x1,y1,x2,y2`，且严格满足 `x1 且 <code>y1`

浏览器只认这个固定结构：coords 属性里必须且仅能写 4 个整数，逗号分隔，无空格。它代表矩形左上角 (x1, y1) 和右下角 (x2, y2) 的绝对像素位置，**不是宽高，不是中心点，也不是相对百分比**。

常见错误包括：

把 coords="100,50,200,150" 写成 coords="100,50,100,100"（右下 x 小于等于左上 x，区域无效）
用设计稿标注的“距左 20px、距顶 30px、宽 120px、高 80px”直接套用，却忘了换算成 x2 = x1 + width、y2 = y1 + height，结果填成 "20,30,120,80"（错把宽高当坐标）
在 Figma 或 Photoshop 里量坐标时，误以图层画布原点为基准，而非图片自身左上角（0,0）

所有坐标都基于图片原始尺寸，CSS 缩放后必须重算

哪怕你给 <img> 加了 style="max-width:90%" 或 max-width: 100%，coords 仍要按 img.naturalWidth 和 img.naturalHeight 下的像素值来填。浏览器不会自动缩放热区——它只机械匹配原始图尺寸下的坐标点。

如果图片显示尺寸变了，又不想手动重量，可用 JS 动态换算：

const img = document.querySelector('img');
const scale = img.offsetWidth / img.naturalWidth;
const area = document.querySelector('area[shape="rect"]');
const [x1, y1, x2, y2] = area.coords.split(',').map(Number);
area.coords = [
  Math.round(x1 * scale),
  Math.round(y1 * scale),
  Math.round(x2 * scale),
  Math.round(y2 * scale)
].join(',');

注意：这个逻辑必须在图片加载完成（load 事件）后执行，否则 naturalWidth 可能为 0。