如何在 HTML5 中制作图像映射？

HTML5 提供了 <map> 和 <area> 标签，允许开发者在图片上制作可点击的区域，这种技术被称为图像映射。

本文将详细介绍如何在 HTML5 中制作图像映射。

制作图像映射的步骤

下面是制作图像映射的步骤：

1. 在 HTML 中加入 <img> 标签，指定图片的路径和尺寸大小。
2. 在图片下方定义一个 <map> 标签，指定图像映射的名称。
3. 在 <map> 标签中定义多个 <area> 标签，指定单击区域的形状和坐标以及链接地址。

实例

下面是一个实例，它在一张图片上定义了两个单击区域：

<img src="map.png" alt="Map" usemap="#workmap" width="400" height="379">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" href="page1.html">
  <area shape="rect" coords="290,172,333,250" href="page2.html">
</map>

上面的代码中，<img> 标签指定了一张名为 map.png 的图片，并指定了图片的宽度和高度。<map> 标签定义了一个名为 workmap 的图像映射。<area> 标签定义了两个单击区域，其中 shape 属性定义了区域的形状（在这个例子中，我们使用了矩形），coords 属性定义了区域的坐标，href 属性定义了单击后跳转的网页。

区域的形状

除了矩形以外，HTML5 还支持以下四种形状：

• 矩形（rect）：用 coords 指定左上角和右下角的坐标值。例如：<area shape="rect" coords="x1,y1,x2,y2">。
• 圆形（circle）：用 coords 指定圆心坐标和半径。例如：<area shape="circle" coords="x,y,r">。
• 多边形（poly）：用 coords 指定多边形各个点的坐标。例如：<area shape="poly" coords="x1,y1,x2,y2,...,xn,yn">。
• 默认区域（default）：默认区域表示除了已定义的区域以外的其他区域。例如：<area shape="default" href="page.html">。

小结

以上就是在 HTML5 中制作图像映射的方法，本文介绍了如何定义单击区域的形状和坐标以及链接地址。如果您对 HTML5 有更多疑问，可以查看 W3School 的教程。