本文详解如何在 html 图像映射（`
图像映射（Image Map）本身不支持对 <area> 元素直接应用 :hover 伪类来改变父 <img> 的 src——因为 <area> 是不可见的语义化热点区域，无法触发 CSS 样式变更，也无法设置背景图或控制外部元素。你尝试的 .misc:hover { background-image: ... } 失效，正是因为 .misc 并非实际渲染的可见块级元素，且 background-image 无法覆盖 <img> 的原始内容。
✅ 正确思路是：监听 <area> 的鼠标事件，动态修改关联 <img> 的 src 属性。推荐使用 jQuery（简洁可靠），也可借助现代 JavaScript（addEventListener），但需注意事件委托（因 <area> 不冒泡到 <img>）。
✅ 推荐方案：jQuery + mouseenter/mouseleave（修复版）
首先，为每个 <area> 添加唯一 id 或语义化 class（如 class="area-interactive"），并确保 <img> 具有明确 class（如 class="main-map-img"）：
<img class="main-map-img"
src="https://i.ibb.co/F59xHXy/portfolio.png"
usemap="#image-map"
alt="Interactive map">
<map name="image-map">
<area class="area-interactive" shape="poly" coords="..." alt="Interactive">
<area class="area-misc" shape="poly" coords="..." alt="Miscellaneous">
</map>然后使用 jQuery 绑定事件（注意：必须等 DOM 加载完成，且修正语法错误——你原代码中漏了 $ 符号）：
立即学习“前端免费学习笔记（深入）”；
$(document).ready(function() {
// 悬停“Interactive”区域 → 切换为 interactive.png
$('.area-interactive').on('mouseenter', function() {
$('.main-map-img').attr('src', 'https://i.ibb.co/s32mqsM/interactive.png');
}).on('mouseleave', function() {
$('.main-map-img').attr('src', 'https://i.ibb.co/F59xHXy/portfolio.png');
});
// 悬停“Miscellaneous”区域 → 切换为 miscellaneous.png
$('.area-misc').on('mouseenter', function() {
$('.main-map-img').attr('src', 'https://i.ibb.co/ch71VJm/miscellaneous.png');
}).on('mouseleave', function() {
$('.main-map-img').attr('src', 'https://i.ibb.co/F59xHXy/portfolio.png');
});
});⚠️ 关键修复点：
- ('.portfolio').attr(...) ❌ → 缺少 $，应为 $('.portfolio').attr(...)；
- <area> 元素不支持直接 hover 样式，但可绑定 JS 事件（jQuery 支持）；
- 使用 mouseenter/mouseleave 而非 mouseover/mouseout，避免子元素冒泡干扰。
✅ 进阶技巧：预加载图片防闪烁
频繁切换 src 可能导致首次悬停时短暂空白（图片未缓存）。建议预加载关键图片：
$(['https://i.ibb.co/s32mqsM/interactive.png',
'https://i.ibb.co/ch71VJm/miscellaneous.png'].forEach(src => {
$('<img>').attr('src', src).appendTo('body').css('display', 'none');
}));✅ 纯 CSS 替代思路（仅限固定尺寸 & 重叠图层）
若所有图片尺寸完全一致，可将多张图片用绝对定位层叠，通过 :hover 控制 opacity 或 z-index 显示对应图层。但此法需额外 HTML 结构，且 <area> 仍无法直接触发，需将 :hover 绑定到包裹容器（如 <div>），再配合 pointer-events: none 避免遮挡热点：
<div class="map-container"> <img class="base-img" src="portfolio.png" usemap="#image-map"> <img class="overlay overlay-interactive" src="interactive.png" alt=""> <img class="overlay overlay-misc" src="miscellaneous.png" alt=""> <map name="image-map">...</map> </div>
.map-container { position: relative; }
.overlay { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.2s; }
.map-container:hover .overlay-interactive { opacity: 1; }
/* 但此法无法按区域精准响应 —— 仅适用于整图切换 */❌ 因此，区域级精确换图必须依赖 JavaScript 事件绑定 <area>。
总结
- <area> 无视觉呈现，不能用 :hover 改变图片，CSS 方案仅适用于整图切换；
- jQuery 是最直观可靠的实现方式：为每个 <area> 绑定 mouseenter/mouseleave，动态修改 <img> 的 src；
- 务必检查 jQuery 选择器语法（$() 不可省略）、DOM 加载时机（$(document).ready）及图片 URL 可访问性；
- 生产环境建议添加图片加载状态提示或 fallback，提升用户体验。
现在，你的图像映射已真正“活”起来——每个区域都成为独立交互入口。
