HTML中map和area标签创建图片热区链接的完整教程-html教程-PHP中文网

原生+能实现图片多区域点击，但需严格满足：usemap与map的name逐字节匹配（含#、大小写、符号）；shape与coords格式严格对应；area必须嵌套于map内且href、alt不可省略；coords基于原始尺寸，响应式需js动态重算。

html中map和area标签创建图片热区链接的完整教程

原生 <map></map> + <area> 能实现图片多区域点击，但只要漏一个 #、坐标格式错一位、alt 缺失，热区就静默失效——浏览器不报错，只让你反复点不动。

这是 90% 失效案例的根源。浏览器只认 usemap="#floor-plan" 这种写法，漏掉 #、大小写不一致（比如 usemap="#Floor-Plan" 对应 <map name="floor-plan"></map>）、连字符和下划线混用，都会断连。

usemap="#product-map" ✅ 必须配 <map name="product-map"></map>
usemap="product-map" ❌ 漏 #，整个映射被忽略
<map id="product-map"></map> ❌ usemap 不认 id，只认 name
<map></map> 建议同时写 id 和 name，方便 JS 查找，如 <map name="product-map" id="product-map"></map>

coords 不是“随便填的像素”，而是由 shape 决定的固定结构；填错会导致热区缩成一点、偏移到画布外，甚至覆盖整张图。

Nano Pdf

一款AI工具，主要用于使用 nano-pdf CLI 通过自然语言指令编辑 PDF 文件，适合需要提升相关任务效率的用户。

下载

shape="rect" → coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足 x1 且 <code>y1
shape="circle" → coords="cx,cy,r"：圆心横纵坐标 + 正整数半径（r > 0）
shape="poly" → coords="x1,y1,x2,y2,x3,y3,...,xn,yn"：顶点坐标成对出现，总数必须是偶数；首尾无需手动重复闭合（现代浏览器自动连线）
别用 shape="default" 做兜底——它会捕获所有未被其他 <area> 覆盖的点击，干扰调试

<area> 必须嵌套在 <map></map> 内部，且 href 和 alt 缺一不可。没 href，点击无跳转；没 alt，屏幕阅读器跳过该区域，Chrome 控制台还会报 warning。

href 不能是空字符串、# 或纯锚点（如 href="#section1"），部分浏览器不兼容；必须为有效 URL，例如：href="./detail.html#speaker" 或 href="javascript:void(0)"
alt 不是可选描述，而是可访问性必需项，应准确说明功能，例如：alt="进入卫生间详情页"，不能写 alt="点击此处"
<area> 是空元素，不能自闭合（<area> 是错的），且必须是 <map></map> 的直接子节点

coords 永远基于图片原始尺寸（img.naturalWidth/img.naturalHeight），不是 CSS 渲染后的显示尺寸。只要图片被缩放（比如 max-width: 100% 或 width: 50%），热区立刻偏移。

原图 1200×800，coords="0,0,100,100" 是左上角 100×100 区域；缩到 375px 宽后，该区域在屏幕上仅约 31×21px，低于触控推荐最小尺寸 44×44px
监听 window.addEventListener('resize', updateCoords) 和 img.addEventListener('load', updateCoords)
在 updateCoords() 中读取 img.naturalWidth 与当前 img.offsetWidth 得到缩放比，再遍历所有 <area>，把每个 coords 数值乘以对应比例后重新赋值给 area.coords
若项目已重度响应式，建议直接改用 <svg></svg> 矢量热区，天然支持缩放与百分比坐标