area标签无法实现连线题，因其仅支持静态点击且无状态记录；可行方案是用area标端点、SVG画线、JS控制配对逻辑，并动态缩放坐标适配图片尺寸。
area 标签本身不支持拖拽、连线或双向交互，它只定义静态可点击区域。想用它“做连线题”，本质是误用——你真正需要的是视觉反馈 + 逻辑配对，而 area 只能完成其中的“点选”部分，且无法判断“从哪连到哪”。
为什么直接用 area 做连线题会失败
常见错误现象：点了左边一个区域，又点右边一个，页面没反应；或者点了两次就跳转了，根本不是连线；控制台安静得像没写代码。
-
area是纯声明式热区，没有状态、没有事件链、不记录点击顺序 - 浏览器对
area的原生支持仅限于href跳转或onclick单点触发，不提供“第一次点 A、第二次点 B 才触发配对”的能力 - 多个
area重叠时，DOM 后序元素会遮盖前序（z-index 无效），导致你以为点中了 A，实际触发的是后面那个 - 移动端 touch 事件和
area的 click 冒泡行为不一致，iOS Safari 上连续点击可能被合并或忽略
area 可以承担的角色：只做“可点击锚点”
如果你已有连线逻辑（比如用 canvas 或 SVG 实现拖线），area 最务实的用途是：在图片上标出固定位置的“连接端点”，供 JS 读取坐标并初始化连线起点/终点。
- 必须确保
img的usemap和map name完全匹配，例如：usemap="#q1-map"对应<map name="q1-map"> - 每个端点用
shape="circle"或shape="rect"，coords必须基于图片原始尺寸（不是 CSS 缩放后尺寸） - 给每个
area加唯一id和语义化data-target，例如：<area id="a1" data-target="left-1" shape="circle" coords="120,85,12"> - 不要依赖
alt传逻辑数据，用data-属性存标识符，JS 里用document.querySelectorAll('area[data-target]')拿到所有端点
真正可行的简易连线题实现路径
放弃“纯 HTML area 方案”，改用轻量级组合：一张图 + area 标端点 + 少量 JS 控制连线逻辑。不需要框架，50 行内可跑通。
立即学习“前端免费学习笔记（深入）”；
- 用
<img>显示题目图，加usemap绑定端点 - 用
<svg>叠在图片上方（同父容器 +position: relative/absolute），所有连线画在 SVG 里 - 监听
area的click，记录点击的data-target；第二次点击时，用两个getBoundingClientRect()算出屏幕坐标，往 SVG 里appendChild一条<line> - 点击已存在的连线？用
line.parentElement.removeChild(line)删除，保持单次配对 - 提交时遍历 SVG 中所有
<line>，反查其端点data-target值，生成答案数组如[["left-1", "right-3"], ["left-2", "right-1"]]
最易被忽略的一点：图片缩放后，area coords 不变，但 SVG 坐标系要同步缩放。别硬编码像素值，用 img.naturalWidth / img.offsetWidth 算比例，动态换算端点位置。否则在 Retina 屏或响应式布局下，连线永远偏移。
