在本教程中，我们将学习用HTML创建图像映射。

什么是图片映射？

图像图是具有链接到某些网页的某些已定义形状的图像。
因此，当我们单击图像上绘制的形状时，我们将转到某个页面。

例

在本教程中，我们将使用theitroad徽标图像。
随意使用您选择的任何其他图像。
但是请记住，您可能必须更改绘制形状的坐标。

步骤1：设定图片尺寸

给定图像的原始尺寸为311x48(宽x高)，以像素为单位。

但是要绘制图像地图，我们将图像大小固定为200x30(宽x高)以像素为单位。

图片：200x30

的HTML

<img
  src="/image/theitroad-logo-black-311x48.png"
  alt="theitroad logo"
  width=200
  height=30>

注意！如果图像的尺寸改变，则形状的坐标也将改变。

第2步：添加" usemap"属性

现在我们必须将usemap属性添加到img标签，并为其分配一个指向地图的值。

在此示例中，我们将usemap属性值设置为#logo_map。

<img
  src="/image/theitroad-logo-black-311x48.png"
  alt="theitroad logo"
  width=200
  height=30
  usemap="#logo_map">

步骤3：建立map元素

现在，我们将创建map元素并将其name属性设置为logo_map，如下所示。

<map name="logo_map">
</map>

因此，img中的usemap属性现在与具有name属性logo_map的map元素绑定在一起。

第4步：使用" area"元素定义形状

在此示例中，我们将在DY徽标上绘制一个矩形。
矩形的宽度为24像素，高度为30像素。

为了绘制这个矩形区域，我们将使用如下所示的" area"元素。

<area shape="rect" coords="0,0,24,20" href="https://www.theitroad.local" alt="theitroad">

最终代码

因此，我们最终的HTML代码如下所示。

<img
  src="/image/theitroad-logo-black-311x48.png"
  alt="theitroad logo"
  width=200
  height=30
  usemap="#logo_map">

<map name="logo_map">
  <area shape="rect" coords="0,0,24,30" href="https://www.theitroad.local" alt="theitroad">
</map>

因此，如果将鼠标悬停在DY徽标上，您会看到它发生了变化，当您单击该区域时，它将带您进入theitroad的主页。