AI 摘要：本文探讨了在现代化网页设计中重新审视图像映射（Image Maps）技术的可行性。作者通过为艾美奖作曲家 Mike Worth 设计复古风格网站的项目，对比了传统图像映射与 SVG 结合现代 CSS/HTML 技术的优劣，最终提出了一种更灵活、可访问且响应式的替代方案。

1. 项目背景与设计挑战
• 为作曲家 Mike Worth 设计具有 90 年代复古风格的网站，需兼顾现代技术标准（可访问性、响应式等）。
• 目标：避免简单模仿，而是通过现代代码实现复古的“表达性设计”（expressive design）。

2. 90 年代网页设计回顾
• 典型案例：华纳兄弟《空中大灌篮》（1996）网站，任天堂、Cheestrings 等品牌的主页设计。
• 特点：图形化导航、品牌与内容融合，但依赖表格切片或图像映射技术。

3. 图像映射技术分析
• 基础语法：通过 <map> 和 <area> 定义图像可点击区域，支持圆形、矩形、多边形坐标。
• 优点：轻量、无需 JavaScript、语义化（配合 ARIA）、跨浏览器兼容。
• 缺点：绝对坐标难以响应式适配，缺乏视觉反馈，维护成本高。

4. 实际应用尝试
• 为 Mike 的网站设计交互式地图，初期尝试图像映射：
• 使用工具生成坐标（如 PathToPoints 转换 SVG 路径）。
• 通过 JavaScript 动态缩放坐标以实现响应式。
• 局限性：无法实现不规则形状悬停效果，代码冗余。

5. 现代替代方案：SVG 内联锚点
• 在 SVG 中创建透明路径作为可点击区域。
• 内嵌 <a> 标签包裹路径，支持悬停动画和丰富内容（如图片、文字预览）。
• 优势：原生响应式（基于 viewBox）、视觉反馈灵活、易于维护。

6. 设计哲学总结
• 图像映射虽曾重要，但现代项目需权衡工具适用性。
• 核心目标：用当代技术（SVG/CSS）复现 90 年代设计的表达力，同时保障性能与可访问性。

CSS-Tricks

Revisiting Image Maps | CSS-Tricks

Let’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.