coords必须为偶数个整数，按顺时针或逆时针列顶点x,y坐标，原点在图片左上角(0,0)，单位像素；少于6个数字无效，缩放会导致坐标失效，推荐用SVG替代或JS动态重算。

coords 坐标必须是偶数个整数，顺序和原点不能错

多边形热区生效的前提是 coords 值合法：必须为偶数个整数，按顺时针或逆时针依次列出所有顶点的 x,y，比如 coords="60,40,120,30,110,90,60,80" 表示四个点。浏览器会自动首尾闭合，所以不要重复第一个点（如写成 "60,40,120,30,110,90,60,80,60,40" 可能触发解析异常）。

坐标原点固定在图片左上角 (0,0)，单位是像素 —— 这意味着只要图片被 CSS 缩放、transform: scale()、或容器尺寸变化，这些坐标就立刻失效，点击区域会偏移甚至完全错位。

• 少于 3 个点（即 coords 不足 6 个数字）会被浏览器忽略，可能退化为矩形或直接不响应
• UI 给的标注图必须是原始尺寸截图，不是 Sketch/Figma 导出的 50% 缩放 PNG
• 别手算坐标：用 Image Map Generator 或 Photoshop 的“路径选择工具”导出，确保数值准确

poly 热区不支持 hover、z-index 和事件委托

<area shape="poly"> 本身不渲染任何 DOM 节点，也不支持 :hover 伪类，它只定义“哪里能点”，不提供“哪里看起来能点”。你看到的只是图片，热区是透明叠加的几何逻辑。

财经HTML高端海报生成

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

下载

• 想实现悬停高亮，只能靠 <img alt="HTML怎么设置多边形映射区域" > 的 title 属性（最简），或额外加一层 pointer-events: none 的 <canvas></canvas> / <svg></svg> 覆盖层来绘制视觉反馈
• 没有 z-index，无法用 CSS 控制层级；不能加 class，无法用 CSS 选中
• 无法对单个 <area> 直接绑定 mouseenter，只能监听 <map></map> 父容器的 click，再通过 event.target 判断是否为某个 <area>

响应式适配只有两个现实路径：JS 动态缩放 or 改用 SVG

原生 <map></map> 没有响应式能力，coords 是死的像素值。硬要适配不同屏幕，只能二选一：

立即学习“前端免费学习笔记（深入）”；

• 用 JS 在 load 和 resize 时重算：img.naturalWidth / img.naturalHeight 对比当前 img.offsetWidth / img.offsetHeight，按比例缩放所有 coords 值，再写回 area.coords
• 彻底放弃 <map></map>，改用 <svg></svg> 内嵌 <polygon></polygon>：天然矢量缩放，支持 :hover、fill、stroke、事件委托，坐标可用百分比或 viewBox 自适应
• 如果只是按钮级需求（非图像映射），优先考虑 clip-path: polygon() + pointer-events: auto，更轻量、易调试

area 的 shape="poly" 和 href/target 配合要点

<area> 的交互能力非常基础：每个 <area> 只能绑定一个 href，跳转行为由 target 控制（_self / _blank 等）。它不支持 AJAX、preventDefault、或自定义数据属性透传。

• nohref 已废弃，现代写法统一用 href="#" + JS click 监听
• 多个 <area> 共享同一个 <map></map>，usemap 必须匹配 <map name="xxx"></map>，且建议同时写 id="xxx"（兼容旧浏览器）
• alt 属性不可省，影响可访问性（screen reader 会读出）
• 若需区分不同区域逻辑，推荐在 JS 中用 data-id 或 data-type 挂载标识，而非依赖 href 字符串解析

真正卡住人的从来不是怎么写标签，而是坐标准不准、缩放后点不中、hover 效果做不出来又不肯换方案 —— 这三件事不提前想清楚，上线后修图、调坐标、补 JS，时间全花在缝合上了。