HTML image map 的 area 标签是配合 img 的可点击热区，需 usemap 与 map name 严格匹配、area 嵌套于 map 内；coords 按原图像素书写，缩放时需 JS 动态修正或改用 SVG。

它不是用来“做地图”的，而是给一张静态图片贴上多个可点击的透明胶布——map是胶布收纳盒，area是每一片胶布本身。你不需要 GeoJSON、不依赖地图 SDK，只要一张设计好的 PNG 或 JPG，就能实现省份点击、户型图分区跳转、产品部件说明等轻量交互。

为什么area点不动？常见失效原因和验证步骤

area本身不渲染、不响应事件，它只在和 <img> 正确配对时才起作用。很多项目卡在这一步就放弃了。

• 检查 <img usemap="#xxx"> 中的 #xxx 是否和 <map name="xxx"></map> 的 name 完全一致（注意：usemap 带 #，name 不带）
• 确认 area 标签严格嵌套在 map 内部，不能放在 div 或其他容器里“中转”
• 浏览器控制台看是否有 “The image map reference ‘#xxx’ was not found” 类错误
• 用开发者工具选中 area 元素，看其 computed styles 里 display 是 none —— 这正常，不代表失效；但若 pointer-events: none 来自父级 CSS，则整个热区被屏蔽

coords 怎么写？三种 shape 的坐标逻辑差异

坐标原点永远是图片左上角 (0,0)，x 向右、y 向下。但不同 shape 的 coords 解析规则完全不同，混用必错。

• shape="rect"：必须且仅需 4 个值，顺序是 left,top,right,bottom（不是宽高）
• shape="circle"：3 个值，centerX,centerY,radius，半径单位是像素
• shape="poly"：至少 6 个值（即 3 个点），格式为 x1,y1,x2,y2,x3,y3,...，浏览器自动首尾连线闭合；不要手动重复第一个点

示例：<area shape="poly" coords="120,80,150,60,180,90,160,120"> 描出一个四边形，不是三角形加一个孤立点。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

想 hover 高亮或 click 弹窗？原生 area 不支持，必须 JS 补足

原生 area 只能干两件事：跳转（href）和提示（alt）。所有视觉反馈、键盘支持、数据绑定都得靠 JS 接手。

• 要悬停变色，得监听 mouseenter/mouseleave，然后切换对应 img 的 src 或用 CSS ::before 叠加层
• 要键盘可访问，每个 area 必须加 tabindex="0"，再监听 keydown 捕获空格/回车
• 移动端 click 有 300ms 延迟，建议监听 touchstart 并 preventDefault()
• 避免用 pointer-events: none 在 img 或父容器上，它会直接让所有 area 失效

响应式下坐标错位？固定像素坐标在缩放时必然失效

所有 coords 都是按原始图片尺寸写的绝对像素值。一旦图片被 CSS 缩放（比如 width: 100%; height: auto），热区就“漂移”了——这是最隐蔽也最容易被忽略的问题。

• 方案一（推荐）：用 JavaScript 动态重算坐标，监听 resize，按缩放比例修正 coords 值
• 方案二：改用 SVG 替代，矢量坐标天然适配缩放（但失去“一张图+简单 HTML”的轻量优势）
• 方案三：放弃响应式缩放，用媒体查询提供多套图片+多套 map，按屏幕宽度切换

别指望浏览器自动适配——它不会。你写的 coords="100,200,300,400" 就是死的像素，哪怕图片被压成 100px 宽，它仍按原图 2000px 宽去算位置。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！