<p>usemap 的 # 前缀和 map name 必须完全匹配（含大小写、连字符），否则热区失效；coords 坐标须基于 naturalWidth/naturalHeight，缩放后需动态重算；area 必须含 href 或 onclick 及语义化 alt。</p>
usemap 的 # 前缀和 name 必须完全匹配
漏掉 # 或大小写不一致，整个热区就彻底失效——浏览器不会报错，但点击毫无反应。这是最常被忽略的硬性规则。
usemap 的值必须以 # 开头，且和 <map name="xxx"> 中的 name 完全一致（包括连字符、空格、大小写）。比如：
-
<map name="Product-Map">配usemap="#product-map"→ 大小写不一致，失效 -
<map name="dept-map">配usemap="#dept-map"→ 正确 -
<map name="floor-plan">配usemap="floor-plan"（缺#）→ 失效
调试时右键图片 → 「检查」，看是否能高亮到对应 <map>；如果没反应，优先查这个。
coords 坐标永远基于 naturalWidth / naturalHeight
你用 CSS 缩放图片，coords 依然要按原始像素填。否则热区会严重偏移——这不是 bug，是规范行为。
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
例如原图是 1600×900，CSS 显示为 400×225，那么 coords="0,0,200,150" 看起来像左上角四分之一区域，实际点击位置仍按 1600×900 计算，结果点不到。
- 用 PS 或 image-map.net 取点时，务必确认导出的是原始图尺寸下的坐标
- 临时加
border: 1px solid red到<img>，再用开发者工具「截图选区」比对坐标是否对齐 - 设计稿给的是「缩放后坐标」？必须反向换算：乘以
naturalWidth / renderedWidth
window.resize 和 img.load 时必须重算 coords
原生 <area> 没有响应式能力，不能靠 CSS 自适应。移动端几乎必错位，除非你手动更新。
- 记录原始宽高：
const naturalW = img.naturalWidth; const naturalH = img.naturalHeight; - 计算缩放比：
const scaleX = img.offsetWidth / naturalW; const scaleY = img.offsetHeight / naturalH; - 遍历所有
<area>，按shape类型分别处理坐标：-
rect：缩放全部 4 个值（x1,y1,x2,y2） -
circle：缩放圆心x,y和半径r -
poly：逐对缩放每组x,y
-
- 监听事件：
img.addEventListener('load', updateCoords)和window.addEventListener('resize', updateCoords)
area 必须含 href 或 onclick，且不能缺 alt
缺 href，点击无跳转行为；缺 alt，不仅屏幕阅读器无法读出功能，旧版 Safari 会直接忽略该 <area>。
- 即使只用 JS 绑定交互，也建议保留
href="#"并在 handler 里e.preventDefault()，避免部分触屏设备意外跳转或滚动 -
alt必须描述功能，如alt="点击进入放射科详情"，不可为空或仅写“科室” - 不要加
title——它在 Chrome/Firefox 里鼠标悬停不显示提示框，是规范行为；要用aria-label替代无障碍支持 - 移动端热区小，
poly点数不宜超过 12 个，否则 Safari 可能解析失败
真正难的不是写一次 coords，而是每次图片加载、窗口缩放、甚至 iframe 重绘后，都得重新校准——别跳过这步，否则用户在 iPad 或折叠屏上根本点不准。
