读到 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 能力跟上了，这种做法就自然消失了。