TIL: 早期网页的图片热区导航

读到 Heydon Pickering 的一篇文章，才知道 HTML 里有个 <area> 元素，专门用来在一张图片上定义可点击区域——这种技术叫 image map 。

<map name="mySite">
  <area
    shape="poly"
    coords="48,249,0,96,129,138"
    href="https://example.com/about"
    alt="关于本站" />
  <area
    shape="poly"
    coords="68,259,10,106,139,148"
    href="https://example.com/contact"
    alt="联系我" />
</map>
<img usemap="#mySite" src="/path/to/homepage.jpg" alt="欢迎访问" />

用 <map> 把多个 <area> 包起来，再在 <img> 上用 usemap 属性关联，就能让一张图片的不同区域指向不同的链接。 shape 支持 rect （矩形）、 circle （圆形）和 poly （多边形）， coords 是像素坐标。

这种做法在 2000 年代初很流行。那时候没有 border-radius ，没有 web fonts ，CSS 能做的事很少。很多"网页"其实就是设计师在 Photoshop 或 FrontPage 里画好的一张大图，整个塞进 HTML ，然后用 image map 标出导航区域。比起当时更流行的表格布局（在 Dreamweaver 里拖半天单元格，打开浏览器发现全乱了），image map 至少坐标不会跑位。

当然问题也很大：图片大加载慢，文字不可选中不可搜索，屏幕阅读器只能读出"一张图片加几个链接"，而且 coords 是像素值，图片一缩放区域就全歪了。后来 CSS 能力跟上了，这种做法就自然消失了。

参考：The area element - HeydonWorks