暗无天日
·
TIL: 早期网页的图片热区导航
💡
原文中文，约900字，阅读约需3分钟。
📝
内容提要
早期网页使用<area>元素定义图片上的可点击区域，称为image map。通过<map>和<img>结合，可以使图片不同区域链接到不同页面。这种技术在2000年代初流行，但由于加载慢和文字不可选中等问题，随着CSS的发展逐渐被淘汰。
🎯
关键要点
- 早期网页使用<area>元素定义图片上的可点击区域，称为image map。
- 通过<map>和<img>结合，可以使图片不同区域链接到不同页面。
- 这种技术在2000年代初流行，但由于加载慢和文字不可选中等问题逐渐被淘汰。
- 当时网页设计主要依赖于大图，image map提供了一种相对稳定的导航方式。
- 随着CSS的发展，image map的使用逐渐减少。
❓
延伸问答
什么是image map技术？
image map技术是通过HTML中的<area>元素在一张图片上定义可点击区域，使不同区域链接到不同页面。
早期网页设计中image map的流行原因是什么？
早期网页设计中，image map提供了一种相对稳定的导航方式，尤其在CSS功能有限的情况下，设计师常用大图作为网页。
使用image map有哪些缺点？
使用image map的缺点包括图片加载慢、文字不可选中和不可搜索，以及缩放后区域失效等问题。
image map是如何与HTML元素结合使用的？
image map通过<map>元素将多个<area>元素包裹起来，并在<img>元素中使用usemap属性关联，从而实现不同区域链接。
为什么image map在2000年代后逐渐被淘汰？
随着CSS的发展，image map的功能被更灵活的CSS布局所取代，导致其使用逐渐减少。
image map支持哪些形状的区域定义？
image map支持矩形（rect）、圆形（circle）和多边形（poly）三种形状的区域定义。
➡️
