area标签点击无反应，主因是usemap与map的name属性未逐字节匹配、usemap缺“#”符号、area非map直接子元素；coords按原图像素计算，缩放后需JS动态重算；poly热区坐标须成对且无自相交；移动端热区不小于44×44px；锚点跳转需用完整路径或JS实现。
area 标签点击没反应？先核对 usemap 和 map name 是否完全匹配
景区导览图里 area 点不动，八成卡在关联失败这一步。浏览器不会报错，但热区彻底失效。
必须同时满足三个条件：
-
<img usemap="#scenic-map">中的#scenic-map要和<map name="scenic-map">的name**逐字节一致**：大小写、连字符、下划线都不能错 -
usemap值**必须带 #**，写成usemap="scenic-map"就是无效的 -
<area>必须是<map>的**直接子元素**，不能包在<div>或<section>里“中转”
调试时打开 Chrome 开发者工具，右键图片 → “检查”，看能否高亮到对应 <map>；如果找不到，基本就是匹配失败。
coords 坐标不准？因为它是按原始图片像素算的
你把一张 1920×1080 的景区全景图用 CSS 缩放到 50%，coords="100,200,300,400" 依然指向原图上那个 200×200 像素的矩形——现在它只占屏幕约 100×100px，点偏是必然的。
立即学习“前端免费学习笔记（深入）”；
解决方式只有两个：
- 放弃 CSS 缩放，改用响应式 SVG（推荐长期维护项目）
- 用 JavaScript 动态重算坐标：监听
window.resize，根据当前<img>实际宽高 / 原始宽高比例，缩放所有coords数值
别信“自动适配”的第三方库，area 本身不感知缩放，所有适配逻辑都得自己补。
多边形热区（如古建筑群轮廓）的 coords 写法陷阱
景区导览图最常用 shape="poly" 描出亭台楼阁的不规则边界，但 coords 极易写错：
- 坐标必须成对出现，总数为偶数；写成
coords="10,20,30,40,50"（5 个数字）→ Safari 直接忽略该区域 - 顶点顺序影响渲染：顺时针或逆时针都行，但**自相交多边形（如蝴蝶形）在 IE/旧 Edge 中可能完全不显示**
- 导出坐标时（比如从 Figma 或 Photoshop），务必手动删掉空格、换行、中文逗号——
coords只认英文逗号和数字 - 移动端触控精度低，建议每个热区最小尺寸 ≥ 44×44px，否则 iOS Safari 点击会失灵
href 写 #id 锚点会失效，必须用完整路径或 JS 处理
想让点击“东门入口”跳转到页面内 <div id="east-gate">？别写 href="#east-gate" —— 这在绝大多数浏览器中静默失败。
正确做法只有两种：
- 写相对 URL：
href="./guide.html#east-gate"（前提是目标页存在且能加载） - 用
href="javascript:void(0)"+onclick或事件委托，手动触发scrollIntoView()
另外，alt 属性不可省略，否则屏幕阅读器无法识别热区功能，也违反 WCAG 可访问性要求。
真正麻烦的不是写几个 <area>，而是当景区更新平面图、调整布局后，所有 coords 都得重测重填；没有自动化流程的话，维护成本远高于用 SVG 或 Canvas 重做一次。
