如何通过HTML实现自定义可点击区域-html教程-PHP中文网

与是html原生图像热点方案，需绑定，必须嵌套其中并设shape、coords、href和alt；坐标基于图片原始像素，缩放时需js重算或改用svg。

如何通过html实现自定义可点击区域

用 `<area>` 配合 `<map></map>` 实现图像热点点击区域

HTML 原生支持自定义不规则可点击区域，核心是 <map></map> 和 <area> 组合，常用于地图、产品图解等场景。它不是靠 CSS 覆盖或 JS 模拟，而是语义化、无障碍友好的原生方案。

常见错误是把 <area> 直接写在页面任意位置——它必须嵌套在 <map></map> 内，且对应图片需通过 usemap 属性绑定：

@@##@@
<map name="plan-map"><area shape="rect" coords="10,20,100,80" href="/room/a" alt="A区">
<area shape="circle" coords="200,150,30" href="/room/b" alt="B区"></map>

shape 可选 rect（左上x,y + 右下x,y）、circle（圆心x,y + 半径）、poly（多边形顶点坐标序列，如 "10,10,50,5,90,30,70,80"）
coords 值必须是整数，单位为像素，基于图片原始尺寸（非缩放后尺寸），缩放时需同步调整或改用响应式方案
所有 <area> 必须有 alt，否则屏幕阅读器无法识别，也影响 SEO

响应式图像下 `<area>` 坐标失效怎么办

当图片用 width/height 或 CSS 缩放时，<area> 仍按原始尺寸计算坐标，导致点击错位。这不是 bug，是规范行为。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

最稳方案：用 object-fit + 容器固定宽高，让图片等比缩放但不拉伸，同时保持原始分辨率，<area> 坐标无需改动
动态适配方案：监听 window.resize，用 JS 按比例重算 coords（需提前存原始尺寸和缩放比）
替代思路：放弃 <map></map>，改用 SVG <path></path> 或绝对定位的透明 <a></a> + pointer-events: auto，更适合复杂交互

不用图片，纯色块/文字区域也要自定义形状点击？

HTML 原生 <area> 只作用于 <img src="floorplan.png" usemap="#plan-map">，对 div、span 等无效。此时必须借助其他手段：

CSS clip-path 可定义任意形状区域，但仅控制「显示」，不改变点击热区——需配合 pointer-events: none 在父容器上，再给子元素设 pointer-events: auto 并精确定位
更直接的做法：用 SVG 作为容器，内嵌 <a></a> 或带 onclick 的 <g></g>，SVG 原生支持 viewBox 响应式，坐标自动缩放
避免用 z-index 叠透明层模拟——易遮挡内容、破坏可访问性、移动端点击区域不准

为什么 `<area>` 点击没反应？排查这三点

不是代码写错，就是环境没配对：

usemap 的值必须以 # 开头，且与 <map name="xxx"></map> 的 name 完全一致（大小写敏感）
<map></map> 标签不能放在 <picture></picture> 或 <figure></figure> 内部，必须与 <img> 同级或在其后（HTML 解析顺序要求）
部分浏览器（如旧版 Safari）对 shape="poly" 的坐标格式校验严格：不能有空格逗号混用，末尾不能多逗号，数字间只允许一个英文逗号