中的map和area标签怎样用

map和area必须配合img的usemap属性使用，usemap值须带#前缀以匹配map的name；area须嵌套于map内，coords为图片原始像素坐标，不支持百分比，缩放会导致热区偏移。

map 和 area 不是独立可用的标签，它们必须配合 img 的 usemap 属性才能生效。漏掉 # 前缀、name 不匹配、area 放在 map 外面——这三类错误占实际失效案例的 90% 以上。

usemap 的值为什么必须带 # 号

usemap 是一个片段标识符引用，本质和页面内锚点链接（如 <a href="#section1">）同理。浏览器只认 usemap="#nav-map" 这种写法，对应 <map name="nav-map">。写成 usemap="nav-map" 或 usemap="map/nav-map" 都会静默失败，图片热区完全不响应。

常见错误现象：

• 鼠标悬停无手型，点击无跳转
• 开发者工具里能看到 area 元素，但 getBoundingClientRect() 返回空区域

area 必须严格嵌套在 map 内部，且 coords 坐标系以图片左上角为原点

area 标签没有视觉输出，它只是坐标描述器。所有 coords 值都是相对于原始图片像素坐标的绝对值，不是相对容器或视口的位置。如果图片被 CSS 缩放、拉伸或用 object-fit 裁剪，热区会严重偏移——这是最隐蔽的兼容性坑。

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

实操建议：

• 用原始尺寸图片（比如 800×600），避免用 CSS 控制宽高
• 矩形：shape="rect" → coords="x1,y1,x2,y2"（左上 + 右下）
• 圆形：shape="circle" → coords="cx,cy,r"（圆心 x,y + 半径）
• 多边形：shape="poly" → coords="x1,y1,x2,y2,x3,y3,..."（至少 3 组坐标，首尾不自动闭合）
• alt 属性不可省，否则屏幕阅读器无法识别，部分浏览器也会禁用该区域

HTML5 中 area 的 target、title、href 都仍有效，但 nohref 已废弃

nohref 是 HTML4 的遗留属性，现代浏览器已忽略。若想让某个区域“不可点击”，直接删掉 href 即可，但要注意：没有 href 的 area 仍会触发 click 事件（只是不跳转），适合搭配 JS 做自定义交互。

其他关键点：

• target="_blank" 可用于新开窗口，但需加 rel="noopener" 防安全风险
• title 会在鼠标悬停时显示 tooltip，对用户提示很实用
• map 元素可以复用：同一 name 的 map 可被多张 img 引用，只要图片尺寸一致

真正难的不是写对语法，而是当图片尺寸动态变化（比如响应式布局中 width: 100%）、或后端返回缩略图时，coords 怎么同步缩放。这时候纯 HTML 方案基本失效，得换 SVG 或 canvas + JS 计算。别指望靠百分比 coords —— area 的 coords 只接受像素值，不支持 % 或 rem。