和 是 HTML 原生图像热点标签， 为容器（需 name 属性）， 通过 usemap="#name" 关联； 在 内定义可点击区域，须闭合，支持 rect/circle/poly 形状及对应 coords 坐标；坐标系原点为图片左上角，不响应 CSS 缩放，需 JS 动态计算比例修正； 必须含语义化 alt 以保障无障碍。
什么是 <map></map> 和 <area> 标签
它们是 HTML 原生支持的图像热点（image map）方案，用于在一张图片上定义多个可点击区域，每个区域可绑定独立的跳转链接。不需要 JavaScript，纯语义化标签即可实现，兼容性极好（IE6+ 都支持）。
关键点：<map></map> 是容器，必须有 name 属性；<img alt="怎样实现点击图像不同区域跳转_MAP与AREA标签的组合" > 通过 usemap 属性关联它（注意写法是 usemap="#xxx"，开头带 #）；<area> 必须放在 <map></map> 内，且不能自闭合（必须写 或 <area ...>）。
shape 和 coords 怎么配对写才不跳错
每个 <area> 的形状和坐标必须严格匹配，否则点击无效或区域偏移。常见组合：
-
shape="rect"：需 4 个值，coords="left,top,right,bottom"（相对于图片左上角的像素坐标） -
shape="circle"：需 3 个值，coords="centerX,centerY,radius" -
shape="poly"：需偶数个值，按顺时针/逆时针顺序列出顶点坐标，如"x1,y1,x2,y2,x3,y3"
⚠️ 容易踩的坑：coords 值之间只能用英文逗号分隔，不能有空格；坐标系原点在图片左上角（0,0），不是 CSS 的 box-model 坐标；如果图片被 CSS 缩放（比如 width: 100%），coords 仍按原始图片尺寸计算——此时必须用响应式方案（见下一条）。
图片缩放后 <area> 失效怎么办
原生 <map></map> 不响应 CSS 缩放，这是最常被忽略的兼容性断点。解决方式只有两个：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 放弃缩放，用原图尺寸显示（最稳妥，但不灵活）
- 改用 JavaScript 计算缩放比例，动态重设
coords（例如监听window.resize，读取img.naturalWidth和img.clientWidth算出 ratio，再遍历所有<area>更新coords）
示例逻辑（不依赖框架）：
const img = document.querySelector('img[usemap]');
const map = document.querySelector('map[name="my-map"]');
const areas = map.querySelectorAll('area');
const ratio = img.clientWidth / img.naturalWidth;
areas.forEach(area => {
const coords = area.coords.split(',').map(Number);
area.coords = coords.map(v => Math.round(v * ratio)).join(',');
});注意：该逻辑需在图片加载完成（img.onload）后执行，并在窗口大小变化时重新触发。
alt、title 和无障碍支持
<area> 必须有 alt 属性，否则屏幕阅读器无法识别该区域功能；title 可选，用于鼠标悬停提示，但不替代 alt。
无障碍要点：
-
alt要描述区域作用，比如alt="进入产品介绍页面"，而不是alt="红色按钮" - 避免仅靠颜色区分区域（比如“点击蓝色区域”），因为色觉障碍用户无法识别
- 如果区域无跳转（仅做标记），应设
href="#"并加tabindex="-1"防止键盘聚焦干扰
原生图像热点看似简单，但坐标的静态性、缩放失准、无障碍缺失这三点，往往在上线后才暴露出来。
