+是唯一原生图片热区方案，但仅在图片100%显示时可靠；缩放会导致坐标偏移，需JS重算或改用SVG/CSS覆盖；usemap必须带#前缀且与map name严格匹配；coords基于原始像素，alt为无障碍必需项。
<map></map> + <area> 是唯一原生支持图片区域点击的 HTML 方案，但只在图片尺寸固定、不缩放时可靠；一旦用 CSS 调整大小或响应式布局，坐标就会偏移——这不是你写错了，是规范本身没考虑缩放。
usemap 和 map name 必须严格配对且带 # 前缀
常见错误是 usemap="mymap" 对应 <map name="mymap"></map>，漏掉 # 导致完全不生效。浏览器要求 usemap 的值必须是 #xxx 格式，而 <map></map> 的 name 属性必须是纯字符串 xxx，二者仅靠这个约定关联。
<img src="logo.png" usemap="#nav-map" alt="HTML图片可点击区域的实现技巧" ><map name="nav-map"><area shape="rect" coords="0,0,100,50" href="/home"></map>- name 和 usemap 的值（去掉
#后）必须完全一致，包括大小写 - 多个
<img alt="HTML图片可点击区域的实现技巧" >可复用同一个<map></map>，只要 usemap 指向它
coords 坐标基于原始图片像素，不随缩放重算
你用 Photoshop 量出的 rect 坐标 10,20,110,70，只在图片以 100% 像素显示时准确。如果加了 width: 50% 或 max-width: 100%，热区会整体偏右下——因为浏览器仍按原始宽高解析 coords。
- 矩形
shape="rect"：coords="x1,y1,x2,y2"，左上→右下 - 圆形
shape="circle"：coords="cx,cy,r"，圆心+半径 - 多边形
shape="poly"：coords="x1,y1,x2,y2,x3,y3,..."，逐点连线 - 所有坐标单位都是原始图片的像素值，不是百分比，也不是视口单位
响应式场景下热区失效的临时补救法
没有纯 HTML/CSS 解决方案。若必须适配缩放，得靠 JS 动态重算 coords，或者换技术栈。
立即学习“前端免费学习笔记（深入）”；
- 用
img.naturalWidth/naturalHeight获取原始尺寸，再根据img.clientWidth/clientHeight算缩放比，最后把原始coords按比例缩放后重设<area>——但需监听resize和load - 更稳的做法是放弃
<map></map>，改用绝对定位的透明<a></a>或<button></button>覆盖在图片上，用 CSS 控制位置和尺寸（支持%、vw等） - 复杂热区（比如不规则轮廓）建议直接用 SVG 替代：SVG 元素天然响应式，
<path></path>或<polygon></polygon>可绑定href或click事件
alt 和 title 不是可选装饰，而是功能必需项
每个 <area> 必须有 alt，否则屏幕阅读器无法识别该区域用途；title 则提供鼠标悬停提示，两者语义不同，不能互相替代。
<area shape="rect" coords="0,0,100,50" href="/home" alt="首页入口" title="点击进入网站首页">- 缺失
alt会导致 WCAG 2.1 AA 级别失败（1.1.1） -
title在移动端基本无效（无 hover），但桌面端仍是最快捷的视觉反馈 - 若区域无跳转（仅触发 JS），
href可设为javascript:void(0)，但alt仍不可省
真正麻烦的不是怎么写对 <map></map>，而是当设计稿要求“这张图在手机上也要点得准”时，你得立刻判断：是硬上 JS 重算坐标，还是说服产品改用 SVG，又或者干脆拆成几个独立按钮——原生图像映射的边界，就在这里。
