HTML area标签实现矩形图片热区点击效果-html教程-PHP中文网

area标签shape="rect"要求coords为四个整数坐标（x1,y1,x2,y2），需匹配同一文档中img的usemap="#name"，且不支持css样式与移动端精准触控，建议用绝对定位元素替代。

html area标签实现矩形图片热区点击效果

area 标签的 shape="rect" 必须用整数坐标

浏览器只接受 shape="rect" 对应的 coords 为四个整数，顺序是 x1,y1,x2,y2（左上、右下），不能带单位、小数或百分比。常见错误是复制了 CSS 中的像素值（比如 "100.5,50,200,150"）或用了相对单位（"10%,20%,30%,40%"），这会导致整个 <area> 失效，点击无响应。

实际使用时建议直接从图片编辑器或浏览器开发者工具中读取像素坐标，或用 JS 动态计算后 Math.round() 一下再填入：

@@##@@
<map name="mymap"><area shape="rect" coords="120,85,240,165" href="/north" alt="北部区域"></map>

img 和 map 必须在同一文档或正确引用

<img src="map.png" usemap="#mymap" alt="地图"> 的 usemap 属性值（如 "#mymap"）必须精确匹配 <map></map> 的 name，且二者要在同一 HTML 文档内——不能把 <map></map> 放在外部文件或 Shadow DOM 里。如果 <map></map> 在其他文件中，浏览器会静默忽略，不报错但热区完全无效。

容易被忽略的点：

usemap 值开头必须带 #，写成 usemap="mymap" 是错的
<map></map> 元素不能嵌套在 <picture></picture> 或 <figure></figure> 内部（部分旧浏览器会丢失绑定）
若页面用 iframe 加载图片，<map></map> 必须也在该 iframe 的文档中

矩形热区不支持 hover 或 active 样式

<area> 是纯语义化标签，没有 DOM 可见节点，无法直接加 CSS 类、监听 mouseenter 或设置 :hover。想实现悬停高亮，得靠 JS 模拟：监听 img 的 mousemove，用 getBoundingClientRect() 和 coords 手动判断鼠标是否落在矩形内，再切换一个覆盖层或 class。

Html2md

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

下载

简单判断逻辑示例：

const [x1, y1, x2, y2] = [120, 85, 240, 165];
img.addEventListener('mousemove', e => {
  const rect = img.getBoundingClientRect();
  const inRect = e.clientX >= rect.left + x1 &&
                 e.clientY >= rect.top + y1 &&
                 e.clientX 

<h3>移动端点击区域太小容易误触</h3>
<p>原生 <code><area></code> 的点击判定是像素级的，手机屏幕下手指触控范围远大于 1px，常出现“点了却没跳转”。这不是 bug，是规范行为——它只响应精确落在 <code>coords</code> 矩形内的 pointer event。</p>
<p>缓解办法只有两个：</p>

扩大 coords 范围（比如左右各加 10px），但需确保不重叠、不越界
放弃 <area>，改用绝对定位的透明 <a></a> 或 <div> 覆盖在图片上，这样能自由控制 <code>touch-action、添加 padding、适配 pointer-events
真正上线项目里，后者更可控，尤其当热区需要动画、文字提示或响应式缩放时，<area> 的静态坐标机制基本不可维护。