怎样实现点击图像不同区域跳转_MAP与AREA标签的组合-html教程-PHP中文网

和是 HTML 原生图像热点标签，为容器（需 name 属性），通过 usemap="#name" 关联；在内定义可点击区域，须闭合，支持 rect/circle/poly 形状及对应 coords 坐标；坐标系原点为图片左上角，不响应 CSS 缩放，需 JS 动态计算比例修正；必须含语义化 alt 以保障无障碍。

怎样实现点击图像不同区域跳转_map与area标签的组合

什么是 `<map></map>` 和 `<area>` 标签

它们是 HTML 原生支持的图像热点（image map）方案，用于在一张图片上定义多个可点击区域，每个区域可绑定独立的跳转链接。不需要 JavaScript，纯语义化标签即可实现，兼容性极好（IE6+ 都支持）。

关键点：<map></map> 是容器，必须有 name 属性；<img> 通过 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 缩放，这是最常被忽略的兼容性断点。解决方式只有两个：

放弃缩放，用原图尺寸显示（最稳妥，但不灵活）
改用 JavaScript 计算缩放比例，动态重设 coords（例如监听 window.resize，读取 img.naturalWidth 和 img.clientWidth 算出 ratio，再遍历所有 <area> 更新 coords）

示例逻辑（不依赖框架）：

Wechat Article Html

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

下载

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）后执行，并在窗口大小变化时重新触发。