最稳做法是用在线工具Image Map Generator生成coords，或用VS Code插件“Image Map”边预览边调整，再通过Chrome插件“Image Map Editor”现场修正线上页面热区；coords须为非负整数、偶数个且usemap带#号。
用在线工具画完直接复制 coords
别手动量像素，也别截图后拿画图软件标点——90% 的坐标错位都源于手估偏差。最稳做法是上传图片到 Image Map Generator 这类在线工具，鼠标拖拽画矩形、点选顶点画多边形，它会实时生成带 shape 和 coords 的 <area> 标签。复制粘贴进 HTML 即可，不用算、不依赖设计稿分辨率。
VS Code 插件边预览边调坐标
如果你习惯本地开发，装个 VS Code 插件 “Image Map” 更高效：打开图片文件（PNG/JPG），右键选择 “Create Image Map”，它会在同目录生成一个 .html 预览页，支持实时点击添加区域、拖动顶点、删点、切换 shape 类型。所有修改都同步更新 coords 值，且自动校验是否为偶数个整数（poly 必须）、是否超出原始宽高——这些硬性规则插件会当场标红提示。
浏览器插件现场取点，适配已上线页面
线上页面已部署但热区偏了？别改代码再发版。装 Chrome 插件 “Image Map Editor”，打开页面后点击插件图标，它会自动识别带 usemap 的 <img>，并把当前渲染尺寸下的热区框出来。你可以直接拖动角点微调，插件会按缩放比例反推原始像素坐标，最后导出修正后的 <area> 片段。特别适合修复因 CSS max-width: 100% 导致的错位问题。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
coords 写错的三个静默失效点
浏览器不报错，但点了没反应，大概率栽在这三处：
-
usemap值漏了#：写成usemap="cn-map"而不是usemap="#cn-map"，绑定彻底失败 -
coords里用了小数或负数：比如coords="10.5,20,100,-5"，必须全为非负整数 -
poly坐标个数是奇数：例如coords="10,10,50,5,90,30"（6 个数是对的），写成"10,10,50,5,90"（5 个）就整个区域无效
真正麻烦的不是画不准，而是坐标一旦写死在 HTML 里，换图、切图压缩、甚至设计师改个图层顺序，都得重新取一遍——没有缓存、不能复用、没法做自动化校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
