HTML可点击区域只覆盖指定位置的方法-html教程-PHP中文网

原生图片热点应使用 + ：需设 usemap="#my-map"，严格匹配；的 shape 和 coords 按渲染尺寸（非原始图）设定，禁用 css 缩放；pointer-events: none 不适用像素级控制；svg 或背景图需换方案。

html可点击区域只覆盖指定位置的方法

图片上只有几个固定位置需要响应点击，其他区域不触发——不能靠 JS 算坐标再判断，那样体验差、维护难。原生方案是 <map></map> 与 <area> 配合 usemap 属性，浏览器直接识别几何区域，无需运行时计算。

关键点：

<img> 必须带 usemap 属性，值为 #my-map 这类片段标识，且与 <map name="my-map"></map> 的 name 严格一致（大小写敏感、无空格）
<area> 的 shape 支持 rect、circle、poly；coords 坐标系以图片左上角为原点，单位是像素，必须与图片实际渲染宽高完全匹配
若图片用 CSS 缩放（如 width: 100%），<area> 坐标会失效——必须用 width/height 属性固定尺寸，或 JS 动态重算 coords
每个 <area> 可独立设 href 或绑定 onclick，但不要混用：href 触发跳转，onclick 执行 JS，二者同时存在时部分浏览器优先 href

有人想“先让整图可点，再对非目标区域加 pointer-events: none”，这在语义和行为上都不可靠。

Article To Html

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

下载

问题在于：

pointer-events: none 作用于整个元素盒模型，无法按像素级区域控制；你只能隐藏一块矩形/圆形区域，但 <area> 支持任意多边形
它会阻止所有事件（包括 mouseenter），导致 tooltip、hover 效果也失效，而 <map></map> 区域外默认就无响应，不影响其他交互
当图片有透明背景或复杂轮廓时，pointer-events 无法识别 Alpha 通道，而 <area> 坐标是明确的几何定义

手写坐标极易出错，尤其 poly 多边形。实操建议：

用浏览器 DevTools 选中 <img>，看右侧面板的 “Computed” → “width/height”，确认当前渲染尺寸（不是原始图片尺寸）
打开开发者工具的 “Elements” 面板，右键 <img> → “Reveal in Elements Panel”，然后用鼠标悬停在图片上，DevTools 会实时显示当前光标相对于图片左上角的坐标（Chrome/Firefox 均支持）
对 rect：填 x1,y1,x2,y2（左上、右下）；对 circle：填 cx,cy,r；对 poly：按顺时针或逆时针顺序列出所有顶点 x1,y1,x2,y2,x3,y3,...
测试时务必在真实设备或响应式模拟器里验证，因为缩放、DPR、字体渲染差异会影响视觉对齐

<map></map> 只适用于 <img> 标签，不支持 CSS 背景图、<picture></picture> 或内联 SVG。此时必须换方案：

SVG 内部直接用 <rect></rect>、<circle></circle>、<polygon></polygon> 等图形元素，它们天然支持 onclick 和 href，坐标系与 SVG viewBox 一致，无缩放失真
如果是 CSS 背景图，放弃像素级精度，改用语义化布局：把图片拆成多个带 id 的容器，每个容器内放一个透明 <a></a> 或 <button></button>，用 position: absolute 精确定位其左上角
绝对避免用 JS 监听整个图片的 click 再手动比对 clientX/clientY —— 在高 DPR 屏幕或滚动中容易偏移，且无法被屏幕阅读器识别