直接用和可实现图片热点，但需严格对齐usemap与map的name（含#、大小写敏感）、按原始像素量取coords、确保area嵌套于map内且含href或onclick，否则点击无效。
直接用 <map></map> 和 <area> 就能实现，不需要 JS，但必须严格对齐坐标、name 和 usemap 值，否则点击无效。
usemap 和 name 必须完全匹配（含 #）
这是最常出错的地方：<img> 的 usemap 属性值必须以 # 开头，且后面的名字要和 <map name></map> 的值**一字不差、大小写敏感**。
-
<img src="map.jpg" usemap="#worldmap">→ 对应的<map name="worldmap"></map> - 写成
usemap="#WorldMap"或usemap="worldmap"（漏 #）都会断连 - 建议同时加
id="worldmap"，部分旧浏览器靠 id 关联
shape 和 coords 格式必须一一对应
每个 <area> 的 shape 决定了 coords 里数字的个数和含义，错一个就失效或错位。
-
shape="rect"→coords="x1,y1,x2,y2"（左上 + 右下，不是宽高） -
shape="circle"→coords="cx,cy,r"（圆心 x、y + 半径，不是直径） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."（偶数个值，按顺序连点闭合） - 所有坐标单位是**原始图片像素**，不是百分比，也不随 CSS 缩放自适应
坐标原点在图片左上角，测量必须用原始尺寸
浏览器按图片原始分辨率解析 coords，如果你用 width="100%" 缩放图片，但坐标还是按 800×600 量的，热点就会偏移甚至消失。
- 用 Photoshop、GIMP 或在线工具（如 ImageMap Generator）导出坐标时，务必确认输入的是原图尺寸
- 调试时打开浏览器开发者工具，把图片临时设为
width: auto; height: auto;查看真实渲染尺寸 - 响应式场景下，要么用 JS 库（如
rwd-image-maps）重算坐标，要么改用 SVG 替代
area 标签必须嵌在 map 内，且要有 href 或 onclick
<area> 是空标签，不能闭合写成 ，也**不能脱离 <map></map> 单独存在**；没有 href 或事件绑定，它就是个不可见的“空气区域”。
- 基础跳转：
<area shape="rect" coords="10,20,100,80" href="/asia.html" alt="亚洲区域"> - 配合 JS：
<area shape="circle" coords="200,150,30" onclick="showInfo('europe')"> - 每个
<area>都该有alt属性，否则影响可访问性和 SEO - 多个
<area>重叠时，DOM 顺序决定点击优先级（后写的覆盖先写的）
真正麻烦的从来不是写几行 HTML，而是坐标怎么量准、缩放后怎么保持可用——原始尺寸、严格匹配、手动验证，这三步跳过一个，热点就大概率点不中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
