HTML image map 的 area 标签是配合 img 的可点击热区，需 usemap 与 map name 严格匹配、area 嵌套于 map 内；coords 按原图像素书写，缩放时需 JS 动态修正或改用 SVG。
它不是用来“做地图”的，而是给一张静态图片贴上多个可点击的透明胶布——map是胶布收纳盒，area是每一片胶布本身。你不需要 GeoJSON、不依赖地图 SDK，只要一张设计好的 PNG 或 JPG，就能实现省份点击、户型图分区跳转、产品部件说明等轻量交互。
为什么area点不动？常见失效原因和验证步骤
area本身不渲染、不响应事件，它只在和 <img alt="map和area标签有什么用？HTML图片热区交互功能全解析" > 正确配对时才起作用。很多项目卡在这一步就放弃了。
- 检查
<img usemap="#xxx" alt="map和area标签有什么用？HTML图片热区交互功能全解析" >中的#xxx是否和<map name="xxx"></map>的name完全一致（注意：usemap带#，name不带） - 确认
area标签严格嵌套在map内部，不能放在div或其他容器里“中转” - 浏览器控制台看是否有 “The image map reference ‘#xxx’ was not found” 类错误
- 用开发者工具选中
area元素，看其 computed styles 里display是none—— 这正常，不代表失效；但若pointer-events: none来自父级 CSS，则整个热区被屏蔽
coords 怎么写？三种 shape 的坐标逻辑差异
坐标原点永远是图片左上角 (0,0)，x 向右、y 向下。但不同 shape 的 coords 解析规则完全不同，混用必错。
-
shape="rect"：必须且仅需 4 个值，顺序是left,top,right,bottom（不是宽高） -
shape="circle"：3 个值，centerX,centerY,radius，半径单位是像素 -
shape="poly"：至少 6 个值（即 3 个点），格式为x1,y1,x2,y2,x3,y3,...，浏览器自动首尾连线闭合；不要手动重复第一个点
示例：<area shape="poly" coords="120,80,150,60,180,90,160,120"> 描出一个四边形，不是三角形加一个孤立点。
立即学习“前端免费学习笔记（深入）”；
想 hover 高亮或 click 弹窗？原生 area 不支持，必须 JS 补足
原生 area 只能干两件事：跳转（href）和提示（alt）。所有视觉反馈、键盘支持、数据绑定都得靠 JS 接手。
- 要悬停变色，得监听
mouseenter/mouseleave，然后切换对应img的src或用 CSS::before叠加层 - 要键盘可访问，每个
area必须加tabindex="0"，再监听keydown捕获空格/回车 - 移动端
click有 300ms 延迟，建议监听touchstart并preventDefault() - 避免用
pointer-events: none在img或父容器上，它会直接让所有area失效
响应式下坐标错位？固定像素坐标在缩放时必然失效
所有 coords 都是按原始图片尺寸写的绝对像素值。一旦图片被 CSS 缩放（比如 width: 100%; height: auto），热区就“漂移”了——这是最隐蔽也最容易被忽略的问题。
- 方案一（推荐）：用 JavaScript 动态重算坐标，监听
resize，按缩放比例修正coords值 - 方案二：改用 SVG 替代，矢量坐标天然适配缩放（但失去“一张图+简单 HTML”的轻量优势）
- 方案三：放弃响应式缩放，用媒体查询提供多套图片+多套
map，按屏幕宽度切换
别指望浏览器自动适配——它不会。你写的 coords="100,200,300,400" 就是死的像素，哪怕图片被压成 100px 宽，它仍按原图 2000px 宽去算位置。
