Skip to main content CSS-Tricks

Search images

重新审视 Image Maps

Andy Clarke on Apr 30, 2025 通过 Cloudways 获取经济实惠且无忧的 WordPress 托管方案 —— 立即开始免费试用。

我上次提到，我一直在为艾美奖获奖游戏作曲家 Mike Worth 制作一个新网站。他聘请我创建一个高度图形化的设计，以展示他的作品。

Mike 喜欢 90 年代的动画，特别是迪士尼的《Duck Tales》和其他动画系列。他挑战我找到一种方法，将他们的复古 90 年代风格融入到他的设计中，而不使其成为拙劣的模仿。但这并不是我唯一的挑战。我还需使用最新的代码来实现 90 年代的感觉，同时保持可访问性、性能、响应性和语义化。

为 Mike 设计就像回到主流网站设计似乎更随意，更少受惯例和最佳实践约束的时代。有些人将这些设计描述为“异想天开”：

形容词

1. 自发地富有想象力或嬉戏
2. 容易突发奇想；反复无常
3. 古怪、不寻常或奇妙

— Collins English Dictionary

但我不太确定这是否完全准确。“嬉戏？” 绝对。“富有想象力？” 可能。“奇妙？” 这取决于。“异想天开”听起来是多余的，所以我称之为“富有表现力”。

研究过去的设计时，我记得网站通常包含结合了品牌、内容和导航的图形。几乎所有提到 90 年代网页设计的内容 —— 当时我设计了我的第一个网站 —— 都提到了 1996 年的华纳兄弟的《Space Jam》。

Warner Brothers’ Space Jam (1996)

所以，我不打算那样做。

像 Nintendo 这样的品牌使用他们的主页来引导人们访问他们的内容，同时做出品牌视觉声明。Cheestrings 将图形与导航结合在一起，让我想知道为什么我们今天看不到这样的设计。《Goosebumps》体现了这种方法，将卡通插图与色彩鲜艳的形状结合成一个功能齐全且视觉丰富的横幅，证明有用并不意味着无聊。

从左到右：Nintendo、Cheestrings、Goosebumps。

在 90 年代，当我为这些网站开发图形时，我要么将它们切片并将它们的各个部分放在表格中，要么使用大多被遗忘的 image maps。

属性和值简要概述

让我们快速回顾一下。Image maps 可以追溯到 HTML 3.2，其中，首先是服务器端 maps，然后是客户端 maps，它们使用 map 和 area 元素定义了图像上的可点击区域。它们在图形、地图和导航中很受欢迎，但随着 CSS、SVG 和 JavaScript 的兴起，它们的使用量下降了。

<map> 将可点击区域添加到位图或矢量图像。

<map name="projects">
 ...
</map>

该 <map> 使用 usemap 属性链接到图像：

<img usemap="#projects" ...>

这些元素可以有单独的 href 和 alt 属性，并且可以使用 ARIA 进行增强以提高可访问性：

<map name="projects">
 <area href="" alt="" … />
 ...
</map>

shape 属性指定区域的形状。它可以是原始的 circle 或 rect，也可以是由一组绝对 x 和 y 坐标定义的多边形：

<area shape="circle" coords="..." ... />
<area shape="rect" coords="..." ... />
<area shape="poly" coords="..." ... />

尽管 image maps 已经存在很久了，但它们仍然提供了很多好处。它们是轻量级的，并且几乎不需要 JavaScript。稍后会详细介绍。当与 alt、ARIA 和 title 属性一起使用时，它们是可访问的且具有语义化的。即使是现代移动浏览器也支持 image maps。

Design by Andy Clarke, Stuff & Nonsense. Mike Worth’s website will launch in April 2025, but you can see examples from this article on CodePen.

我为 Mike Worth 设计的设计包括几个图形导航元素，这让我想知道 image maps 是否仍然是一个合适的解决方案。

Image Maps 的实际应用

Mike 希望他的网站展示他过去的作品和他想做的项目。为了使他设计的这一方面更易于发现和更有趣，我创建了一个 map，供人们通过点击 map 的各个区域来打开 modals 进行探索。此 map 包含编号的圆圈，按下其中一个会弹出其 modal。

我的第一个想法是将锚点嵌入到外部 map SVG 中：

<img src="projects.svg" alt="Projects">
<svg ...>
 ...
 <a href="...">
  <circle cx="35" cy="35" r="35" fill="#941B2F"/>
  <path fill="#FFF" d="..."/>
 </a>
</svg>

这种方法是有问题的。这些锚点仅在 SVG 是内联时才有效，并且不适用于 <img> 元素。但是 image maps 效果很好，即使指定它们的坐标可能很费力。幸运的是，有许多工具可用，这些工具使定义坐标不那么繁琐。上传图像，选择形状类型，绘制形状，然后复制标记：

<img src="projects.svg" usemap="#projects-map.svg">
<map name="projects-map.svg">
 <area href="" alt="" coords="..." shape="circle">
 <area href="" alt="" coords="..." shape="circle">
 ...
</map>

当图像大小固定时，Image Maps 效果很好，但是弹性图像会带来问题，因为 map 坐标是绝对的，而不是相对于图像尺寸的。使 image maps 具有响应性需要一些 JavaScript 来在图像更改大小时重新计算这些坐标：

function resizeMap() {
 const image = document.getElementById("projects");
 const map = document.querySelector("map[name='projects-map']");
 
 if (!image || !map || !image.naturalWidth) return;
 
 const scale = image.clientWidth / image.naturalWidth;
 map.querySelectorAll("area").forEach(area => {
 
  if (!area.dataset.originalCoords) {
   area.dataset.originalCoords = area.getAttribute("coords");
  }
  const scaledCoords = area.dataset.originalCoords
  
  .split(",")
  .map(coord => Math.round(coord * scale))
  .join(",");
  area.setAttribute("coords", scaledCoords);
 });
}
["load", "resize"].forEach(event =>
 window.addEventListener(event, resizeMap)
);

我仍然对这个实现不满意，因为我希望某人能够按下更大的 map 区域，而不仅仅是编号的圆圈。

每个 <path> 都有定义其绘制方式的坐标，并且它们相对于 SVG 的 viewBox：

<svg width="1024" height="1024">
 <path fill="#BFBFBF" d="…"/>
</svg>

另一方面，map 的 <area> 坐标相对于图像的左上角是绝对的，因此需要转换 <path> 值。幸运的是，Raphael Monnerat 编写了 PathToPoints，这是一个专门用于此目的的工具。上传 SVG，选择点频率，复制每个路径的坐标，并将它们添加到 map 区域的 coords: 中：

<map>
 <area href="" shape="poly" coords="...">
 <area href="" shape="poly" coords="...">
 <area href="" shape="poly" coords="...">
 ...
</map>

Image Maps 的更多问题

Image Maps 是硬编码的，如果没有工具，创建起来很耗时。即使使用用于生成 image maps、将路径转换为点然后使用 JavaScript 重新计算它们的工具，它们也可能难以大规模维护。

<area> 元素不可见，并且除了光标的变化之外，当有人将鼠标悬停在链接上或按下链接时，它们不提供任何视觉反馈。此外，没有简单的方法可以添加动画或交互效果。

但对我来说，最大的问题是 image maps 的基于像素的值默认是不响应的。那么，使用 CSS、HTML 和 SVG 实现我的 map 的替代解决方案是什么？

绝对定位在我 map 上的锚点无法解决基于像素的定位问题，也无法给我想要的形状不规则的可点击区域。外部 SVG 中的锚点也无法正常工作。

但解决方案正摆在我面前。我意识到我需要：

1. 为每个可点击区域创建一个新的 SVG 路径。
2. 使这些路径不可见。
3. 将每个路径包装在锚点内。
4. 将锚点放置在 SVG 源末尾的其他元素下方。
5. 将该外部文件替换为内联 SVG。

我创建了一组六个更大的路径，这些路径定义了可点击区域，每个路径都有自己的 fill 以匹配其编号的圆圈。我将每个锚点放置在 SVG 源的末尾：

<svg … viewBox="0 0 1024 1024">
 <!-- Visible content -->
 <g>...</g>
 <!-- Clickable areas -->`
 <g id="links">`
  <a href="..."><path fill="#B48F4C" d="..."/></a>`
  <a href="..."><path fill="#6FA676" d="..."/></a>`
  <a href="..."><path fill="#30201D" d="..."/></a>`
  ...
 </g>
</svg>

然后，我将这些锚点的 opacity 降低到 0，并为它们的完全不透明的悬停状态添加了一个短暂的 transition：

#links a {
 opacity: 0;
 transition: all .25s ease-in-out;
}
#links a:hover {
 opacity: 1;
}

虽然使用 image map 的 <area> 可悲地没有提供视觉反馈，但嵌入的锚点及其内容可以响应某人的操作，暗示即将发生的事情，并为设计添加细节和深度。

我可能会在这些编号的圆圈上添加光泽，以与我为 Mike 设计的品牌保持一致。或者，我可以包括图像、标题或其他内容来预览弹出 modals：

<g id="links">
 <a href="…">
  <path fill="#B48F4C" d="..."/>
  <image href="..." ... />
 </a>
</g>

亲自尝试一下： CodePen Embed Fallback

富有表现力的设计，现代技术

设计 Mike Worth 的网站给了我一个机会，将富有表现力的设计与现代开发技术相结合，而重新审视 image maps 提醒我 image maps 在 Mike 非常喜欢的时期是多么重要的工具。

最终，image maps 并不是 Mike 网站的合适工具。但是探索它们帮助我了解了我真正需要的是什么：一种使用可访问、轻量、响应和语义化的现代技术来重新捕获 90 年代网站设计的表现力和个性的方法。这就是设计的意义：为工作选择正确的工具，即使有时这意味着回头看看才能前进。

Biography: Andy Clarke

Andy Clarke 通常被称为网页设计的先驱之一，他在推动网页设计的边界方面发挥了重要作用，并以其创意和视觉上令人惊叹的设计而闻名。他的作品激发了无数设计师探索产品和网站设计的全部潜力。

Andy 撰写了几本行业领先的书籍，包括 Transcending CSS , Hardboiled Web Design , 和 Art Direction for the Web。他还与各种规模和行业的企业合作，通过设计实现他们的目标。

访问 Andy 的工作室 Stuff & Nonsense，并查看他的 Contract Killer，这是受到成千上万的网页设计师和开发人员信任的流行的网页设计合同模板。

Psst! 创建一个 DigitalOcean 帐户，并获得 $200 in free credit 用于基于云的托管和服务。

Comments

1. Dirk Krause Permalink to comment# May 4, 2025 本文更好的标题可能是“使用 SVG 模拟 image maps”。我差点跳过阅读它，但它包含了一种很棒的方法。 Loading... Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked * Comment * Write Preview Name * Email * Website Save my name, email, and website in this browser for the next time I comment. Copy and paste this code: micuno * Leave this field empty Δ

The Return of the 90s Web

One of my forever-lessons here on CSS-Tricks is that having your own website and blogging on it is a good idea. It's probably one of the best decisions I've ever made, as it's been a direct source of fun, career development and, eventually, income. I always chuckle at little blogging… June 26, 2020

Should I Use Source Maps in Production?

It's a valid question. A "source map" is a special file that connects a minified/uglified version of an asset (CSS or JavaScript) to the original authored version. Say you've got a file called _header.scss that gets imported into global.scss which is compiled to global.css. That final CSS file is what… March 1, 2019

Creating Interactive Maps in WordPress with MapSVG

The MapSVG plugin for WordPress allows you to create feature-rich, interactive maps quickly and through a smart admin UI. Interactive maps are a common request for projects when you need to visualize impact over particular locations. If you are already on WordPress, this comprehensive plugin could be your solution for… May 29, 2019 CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter * Email Address: Subscribe

DigitalOcean

• About DO
• Cloudways
• Legal stuff
• Get free credit!

CSS-Tricks

• Contact
• Write for CSS-Tricks!
• Advertise with us

Social

• RSS Feeds
• CodePen
• Mastodon
• Bluesky

Back to Top %d

Search results

Magnifying Glass Search Close search results FiltersShow filters Sort by: Relevance•Newest•Oldest

No results found

Filter options

Close Search Search powered by Jetpack