最标准方式是用<map>关联图片、<area shape="rect">定义矩形热区，coords须为原始像素的x1,y1,x2,y2四整数，usemap值须以#开头且与map的name严格一致；缩放需手动换算坐标，移动端热区≥44×44px；href与onclick可共存但需preventDefault()阻止跳转；失效主因是usemap缺#、name不匹配、图片加载失败、pointer-events:none或overflow:hidden裁切。
用 <area> 配合 <map> 定义矩形热区
最标准、语义正确的方式是使用图像映射（image map）：把图片和 <map> 关联，再用 <area shape="rect"> 描述矩形区域。关键点不是“画个框”，而是坐标必须匹配图片原始像素尺寸——缩放后的 <img> 不会自动缩放 coords 值。
-
shape="rect"时，coords必须是四个整数：x1,y1,x2,y2，分别对应左上角和右下角像素坐标 -
usemap属性值必须以#开头，且与<map name="xxx">中的name完全一致（大小写敏感） - 如果图片被 CSS 缩放（如
width: 100%），需手动按比例换算坐标；否则点击会偏移 - 移动端必须确保矩形区域物理尺寸 ≥ 44×44px，否则用户点不中——真机测试不可跳过
<area> 的 href 和 onclick 能共存吗
可以，但行为有优先级：href 会触发页面跳转，覆盖 onclick 的默认行为；若想执行 JS 逻辑并阻止跳转，必须显式调用 event.preventDefault()。
- 只写
onclick="doSomething(); return false;"是兼容性更稳的老写法 - 现代写法建议绑定 JS 事件监听器，用
event.target判断是否点在rect区域内，再决定是否跳转或执行其他逻辑 - 不要依赖
href="#"+onclick，容易引发页面滚动到顶部，且无障碍体验差
为什么矩形热区点了没反应？常见卡点
90% 的失效不是代码写错，而是环境或配置漏掉一环：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
<img>缺少usemap属性，或值没加#（例如写成usemap="mymap"而非usemap="#mymap"） -
<map>的name拼写/大小写与usemap不一致 - 图片路径错误导致加载失败，
<map>失去上下文，浏览器直接忽略所有<area> - CSS 给
<img>设了pointer-events: none，整个图变“透明”不可点 - 父容器有
overflow: hidden且图片部分被裁切，热区超出可视范围就点不到
不用 <map>，纯 CSS/JS 能模拟矩形可点击区域吗
能，但属于“绕路方案”：适合动态热区、频繁变更坐标、或需要键盘支持（Tab + Enter）的场景。原生 <area> 不支持 focus 或键盘交互。
立即学习“前端免费学习笔记（深入）”；
- 用绝对定位的
<div>盖在图片上，设position: absolute+top/left/width/height对齐目标矩形位置 - 必须加
pointer-events: auto（父级若设了none会继承） - 为可访问性，要加
tabindex="0"和role="button"，并手动处理keydown（Enter/Space） - 响应式布局下，需监听
window.resize并重算div位置——而<area>坐标是静态像素值，这点反而更省事
