area标签不支持onmouseover事件，应通过img的mousemove事件结合coords坐标手动判断鼠标是否在区域内，或用绝对定位透明层模拟悬停效果。
area 标签本身不支持 onmouseover 事件响应
直接给 <area> 写 onmouseover 或绑定 JS 事件监听器，在大多数浏览器中**不会触发**——这是常被忽略的兼容性事实。<area> 是 <map> 的子元素，语义上仅用于定义热点区域，W3C 规范未要求其实现交互事件冒泡或直接响应。实际测试中，Chrome、Firefox 均忽略 onmouseover，只有部分旧版 IE 曾有非标准支持。
正确做法：用 CSS + JavaScript 模拟区域悬停效果
核心思路是放弃依赖 <area> 自身事件，改用 <img> 的 onmousemove 获取坐标，结合各 <area> 的 shape 和 coords 手动判断鼠标是否落在该区域内。
- 先用
getBoundingClientRect()获取图片在视口中的真实位置，减去鼠标clientX/Y得到相对坐标 - 对每个
<area>，根据其shape（"rect"/"circle"/"poly"）写对应判断逻辑 -
"rect"最简单：检查x > left && x < right && y > top && y < bottom -
"circle"需计算距离：(x-cx)² + (y-cy)² < r² -
"poly"推荐用射线法（Ray Casting），可复用成熟函数如isPointInPolygon()
示例片段（简化 rect 判断）：
const img = document.getElementById('main-img');
const areas = document.querySelectorAll('map area');
<p>img.addEventListener('mousemove', (e) => {
const rect = img.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;</p><p>areas.forEach(area => {
if (area.shape === 'rect') {
const [l, t, r, b] = area.coords.split(',').map(Number);
if (x > l && x < r && y > t && y < b) {
// 触发切换逻辑，比如更新预览图
document.getElementById('preview').src = area.dataset.hoverSrc;
}
}
});
});
更轻量且兼容的替代方案：用绝对定位的透明层覆盖
如果区域形状不复杂（尤其是矩形），比手动坐标计算更稳：为每个 <area> 对应位置，用 <div> 覆盖一层透明 position: absolute 元素，并监听它的 mouseenter/mouseleave。
立即学习“前端免费学习笔记（深入）”；
- 需确保父容器
position: relative，且<img>和覆盖层同级 - 覆盖层
z-index设为 1，pointer-events: auto（默认即可） - 通过
<area>的coords和图片原始尺寸，按比例算出覆盖层宽高与top/left - 注意响应式场景下需监听
window.resize重算位置
优势是事件原生可靠，代码易读；缺点是 DOM 节点增多，多边形区域需用 clip-path 或 SVG 模拟。
切图切换时容易忽略的性能与体验细节
频繁切换图片可能引发抖动或加载延迟，尤其在移动设备上：
- 提前用
new Image().src = url预加载所有 hover 图片，避免首次悬停时白屏 - 加防抖（debounce）：鼠标在区域边缘小幅晃动时，不要反复触发切换
- 移动端无 hover，需补充
click或touchstart作为 fallback - 若使用
<picture>或srcset，确保dataset.hoverSrc指向的是完整 URL，而非相对路径片段
最麻烦的其实是 coords 坐标系和图片缩放的匹配——浏览器渲染时若图片被 CSS 缩放（如 width: 100%），<area> 的 coords 仍按原始尺寸解析，必须按缩放比换算，这点几乎每次都会出错。
