HTML 的 `
⚠️ 关键注意事项：坐标单位一致性：确保 top/left/width/height 严格对应 coords 中的像素值（本例中 coords="315,292,430,432" 表示矩形左上 (315,292)，右下 (430,432)）； 不可嵌套在
.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;
} 内：HTML 规范禁止将 放在