HTML area标签实现图片指定位置点击跳转-html教程-PHP中文网

area标签必须嵌套在map内且img需通过usemap="#name"关联，coords按原图像素定义，响应式需js动态缩放，无障碍需alt和tabindex。

html area标签实现图片指定位置点击跳转

area 标签必须配合 map 使用才能生效

单独写 <area> 不会响应点击，浏览器直接忽略。它必须嵌套在 <map></map> 元素内，且 <img> 必须通过 usemap 属性关联到该 <map></map> 的 name。

常见错误是只写了 <area> 却忘了 <map></map> 包裹，或 usemap 值漏了开头的 #（如写成 usemap="mymap" 而不是 usemap="#mymap"）。

正确结构示例：

@@##@@
<map name="floorplan"><area shape="rect" coords="10,20,110,120" href="/kitchen">
<area shape="circle" coords="200,80,30" href="/bedroom"></map>

coords 坐标系以图片左上角为原点，单位是像素

coords 的数值含义取决于 shape 属性：

rect：四个值，x1,y1,x2,y2（左上角 + 右下角）
circle：三个值，cx,cy,r（圆心 x、y + 半径）
poly：偶数个值，依次为 x1,y1,x2,y2,x3,y3,...（多边形顶点）

注意：这些坐标是相对于原始图片尺寸的，不是 CSS 缩放后的显示尺寸。如果用 width/height 或 CSS 缩放了图片，coords 仍要按原图像素写，否则热区会错位。

调试建议：先用原图尺寸开发，再用开发者工具临时覆盖 img 的 width/height 查看效果；若需响应式，得用 JS 动态重算 coords（见下节）。

响应式页面中 area 热区会失效的真正原因

根本问题不是 <area> 本身不支持响应式，而是 coords 是固定像素值，而图片在不同屏幕下缩放比例不同，导致热区偏移。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

纯 HTML/CSS 无法自动适配 —— <map></map> 没有媒体查询支持，coords 也不能写百分比。

可行方案只有两个：

放弃 <map></map>，改用绝对定位的透明 <a></a> + pointer-events（适合简单矩形区域）
保留 <map></map>，但用 JS 监听 resize，根据当前图片显示宽高与原始宽高比，动态重写所有 <area> 的 coords

后者示例逻辑（假设原始图宽 800，当前显示宽 img.offsetWidth）：

const scale = img.offsetWidth / 800;
areas.forEach(area => {
  const coords = area.coords.split(',').map(n => Math.round(n * scale));
  area.coords = coords.join(',');
});