HTML | 映射图像

简介

HTML中的映射图像是将一个图像划分为不同部分，使每个部分都可以作为超链接点击。这种技术被广泛用于网页设计中，尤其是图片导航。

映射图像使用map元素来创建链接区域，然后在图像上使用area元素来定义各个链接区域，并将它们与链接目标关联起来。

语法

<img src="image.jpg" usemap="#mapname" alt="Map of image">
<map name="mapname">
  <area shape="rect" coords="x1,y1,x2,y2" href="target.html" alt="Link Description">
  <area shape="circle" coords="x,y,r" href="target.html" alt="Link Description">
  <area shape="poly" coords="x1,y1,x2,y2,...,xn,yn" href="target.html" alt="Link Description">
</map>

• img元素用于在页面中嵌入图像。

• map元素用于创建链接区域。name属性为地图命名，无需和img的usemap属性值相同，但两者需要对应。

• area元素用于定义链接区域。shape属性定义链接区域的形状，可以是矩形（rect）、圆形（circle）和多边形（poly）。coords属性定义链接区域的具体位置，根据shape属性的不同需要不同的参数。href属性定义链接目标，即用户点击链接区域后跳转到的页面URL。alt属性定义当图像不可用时替代文本的内容。

示例

以下示例用于演示映射图像的基本用法，创建了一个四向箭头的链接区域。 shape属性被设置为poly，coords属性包含箭头绘制所需的所有坐标值。

<img src="https://i.imgur.com/AD66sv0.png" alt="Map of image" usemap="#arrow">
<map name="arrow">
  <area shape="poly" coords="43,189,136,189,136,98,228,98,228,11,136,11,136,95,44,95" href="https://www.google.com/">
</map>

总结

映射图像是一种强大的工具，可以为网页设计增添互动性。掌握映射图像的技术，可以帮助创造出更具吸引力和交互性的网页设计。