HTML area标签配合map制作图片热点链接-html教程-PHP中文网

area标签配合map实现图片热点链接需严格匹配usemap与map的name值、正确设置shape和coords格式、确保href为有效url且alt非空，响应式下须用js动态重算coords。

html area标签配合map制作图片热点链接

area 标签配合 map 实现图片热点链接，**不是“写了就能点”，而是“错一个字符就完全失效”**。浏览器不会报错，只静默忽略——你反复点击没反应，大概率是匹配或格式问题。

usemap="#name" 和 `map name="name"` 必须逐字节一致

这是 90% 热区失效的根源。大小写、连字符、空格、#号缺一不可。

usemap="#floor-plan" ✅ 必须配 <map name="floor-plan"></map>
usemap="floor-plan" ❌ 漏 #，整个映射被忽略
usemap="#Floor-Plan" ❌ 大小写不一致，断连
<map id="floor-plan"></map> ❌ usemap 不认 id，只认 name

调试时直接在开发者工具里复制粘贴比对，别靠肉眼扫。

`shape` 和 `coords` 格式必须严格配对

coords 不是“随便填的数字”，它由 shape 类型决定解析逻辑；填错一位，热区可能缩成一个点、偏移到画布外，甚至覆盖整张图。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

shape="rect" → coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足 x1 且 <code>y1
shape="circle" → coords="cx,cy,r"：圆心横纵坐标 + 正整数半径（r > 0，不能是小数或 0）
shape="poly" → coords="x1,y1,x2,y2,x3,y3,x1,y1"：顶点成对出现，总数必须为偶数；首尾点建议手动重复闭合，否则不是封闭区域
coords 中只允许数字和英文逗号，Photoshop/Figma 导出后务必删掉空格、换行、中文标点

`href` 必须是有效 URL，`alt` 不可省略

area 的 href 不支持纯锚点跳转，href="#" 或 href="#section" 在多数浏览器中会失效或触发页面跳动。

✅ 支持：href="./detail.html"、href="javascript:void(0)"（配合 JS 处理）
❌ 不支持：href="#"、href="#detail"、href=""
alt 是强制属性，不可为空字符串；它是屏幕阅读器理解区域用途的唯一依据，比如 alt="点击进入厨房详情"

响应式缩放下 `coords` 必须用 JS 动态重算

coords 永远基于图片原始尺寸（img.naturalWidth/img.naturalHeight），不是 CSS 渲染后的显示尺寸。只要用了 width、max-width 或 transform: scale()，热区立刻偏移。

原始图 1200×800，coords="0,0,100,100" 是左上角 100×100 区域；缩到 375px 宽后，该区域在屏幕上仅约 31×21px，低于触控最小推荐尺寸 44×44px
没有纯 HTML/CSS 方案能自动适配；可靠解法是监听 resize 和 load 事件，用缩放比重算所有 coords 值
如果项目重度响应式，优先考虑改用 SVG 矢量热区——它天然支持缩放，无需 JS 补偿