HTML页面热区怎么做？多边形可点击区域绘制教程-html教程-PHP中文网

热区失效主因是坐标未基于图片原始尺寸。须用naturalWidth/naturalHeight量坐标，响应式需动态缩放coords，href和alt缺一不可，且usemap值须带#前缀。

html页面热区怎么做？多边形可点击区域绘制教程

热区不是加个 area 就完事——坐标没对齐、图片一缩放就全偏移，这是最常出问题的地方。

为什么 poly 热区点了没反应？

绝大多数不是语法写错，而是 coords 值和图片原始像素尺寸不匹配。比如原图是 1200×800，你在 PS 里量的是缩放后 600×400 视图下的坐标，直接填进 coords="300,200,350,220..."，那实际点击位置会偏移整整一倍。

必须确认：所有坐标都基于图片文件本身的 naturalWidth 和 naturalHeight，而不是浏览器渲染后的尺寸。

用开发者工具右键图片 →「Open in new tab」，单独打开原图再量坐标
在线工具如 image-map.net 导出前，检查是否勾选了「Use original image size」
高 DPR 屏幕（如 MacBook Retina）下，截图工具可能默认导出 2x 坐标，要手动除以 2

poly coords 怎么写才合法？

coords 必须是整数，逗号分隔，且至少 3 对顶点（6 个数字），不能带单位、不能有小数点。

错误示例：coords="100.5,200,300,400.2,500,600" → 小数会被截断或忽略，导致形状塌陷

正确写法：coords="100,200,300,400,500,600,450,250"（4 个点构成四边形）

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

点顺序影响填充方向，建议顺时针或逆时针连续标注，避免交叉
某点超出图片边界（如 x > naturalWidth）不会报错，但该点参与连线后，点击区域可能变小或失效
多边形顶点数无硬性上限，但超过 20 个点后手调易出错，建议拆成多个 area

响应式页面里 poly 热区怎么保持准？

原生 area 不响应缩放——coords 是静态像素值，CSS 改变图片宽高后，热区不会跟着动。

必须在图片加载完成和窗口 resize 时，动态重算每个 area 的 coords：

const img = document.querySelector('img[usemap]');
const map = document.querySelector('map[name="hospital-map"]');
<p>function updateAreaCoords() {
if (!img.naturalWidth) return;
const scaleX = img.offsetWidth / img.naturalWidth;
const scaleY = img.offsetHeight / img.naturalHeight;</p><p>map.querySelectorAll('area[shape="poly"]').forEach(area => {
const coords = area.coords.split(',').map(Number);
const newCoords = [];
for (let i = 0; i  scaleX));
newCoords.push(Math.round(coords[i + 1]  scaleY));
}
area.coords = newCoords.join(',');
});
}</p><p>img.addEventListener('load', updateAreaCoords);
window.addEventListener('resize', updateAreaCoords);</p>