如何为图像映射区域（area）添加 GIF 悬停效果

HTML 的 `

.image-container {
  width: 1500px;
  height: 1500px;
  position: relative;
}

.area-wrapper {
  position: absolute;
  /* 坐标解析：coords="x1,y1,x2,y2" → 左上(x1,y1)，右下(x2,y2) */
  /* 注意：HTML area 坐标系原点在左上角，y 向下增长 */
  top: 292px;    /* y1 */
  left: 315px;   /* x1 */
  width: 115px;  /* x2 - x1 = 430 - 315 */
  height: 140px; /* y2 - y1 = 432 - 292 */
  /* 可选：提升可点击性与调试可见性 */
  cursor: pointer;
}

.area-wrapper:hover {
  background-image: url('lil_dream.gif');
  background-size: cover;
  background-position: center;
  z-index: 10;
}

⚠️ 关键注意事项：

• 坐标单位一致性：确保 top/left/width/height 严格对应 coords 中的像素值（本例中 coords="315,292,430,432" 表示矩形左上 (315,292)，右下 (430,432)）；
• 不可嵌套在 内：HTML 规范禁止将 放在
• 保留 的功能性：即使视觉效果由 .area-wrapper 承担， 仍需保留在
• GIF 优化建议：大型 GIF 可能造成性能卡顿，建议压缩体积（如使用 gifsicle）或考虑现代替代方案（如 @keyframes + PNG 序列 /

? 进阶提示：若存在多个热点区域，可为每个 .area-wrapper 添加 data-area-id 并统一管理 hover 状态，或借助 JavaScript 动态计算位置，实现响应式适配（需按比例缩放坐标）。