HTML |

HTML有一个非常实用的标签，即<map>标签。该标签主要用于创建基于图像的可点击区域，从而实现在图像上进行交互的效果。在<map>标签中，名称属性name是非常重要的一个属性，它被用来关联一个<img>标签，并标识可点击区域的范围。

如何使用<map>标签

首先，需要明白<map>标签和<img>标签是联动使用的。也就是说，<map>标签所创建的可点击区域必须与<img>标签所关联的图像相对应，因此，<map>标签的name属性是必须的。

示例代码如下：

<img src="image.jpg" width="500" height="300" usemap="#image-map">
<map name="image-map">
  <area shape="rect" coords="0,0,250,300" href="left.html">
  <area shape="rect" coords="250,0,500,300" href="right.html">
</map>

在该示例中，<img>标签搭配src、width和height属性用来展现一张图像，<map>标签搭配name属性为该图像创建了一个可点击区域，<area>标签则为具体的点击区域，它们的shape属性指定了点击区域的形状，coords属性定义了点击区域的具体坐标，href属性则指定了当用户鼠标点击这个区域时的跳转链接。

可点击区域的几种形状

在<area>标签中，shape属性常用的取值包括以下几种：

• rect：矩形，需要用coords属性指定左上角和右下角两个坐标；
• circle：圆形，需要用coords属性指定中心坐标和半径；
• poly：多边形，需要用coords属性指定各个点坐标。

其中，rect和circle比较好理解，poly相对复杂，需要指定坐标点的数量和具体坐标。

名称属性的使用

虽然<map>标签的名称属性name不是必须的，但是使用name属性可以为图像创建多个不同的可点击区域。如果只有一张图像，也只存在一个可点击区域，我们可以使用id属性来代替name属性。

示例代码如下：

<img src="image.jpg" width="500" height="300" usemap="#image-map">

<map name="image-map">
  <area shape="rect" coords="0,0,250,300" href="left.html">
  <area shape="rect" coords="250,0,500,300" href="right.html">
</map>

<map id="image-map">
  <area shape="circle" coords="250,150,100" href="center.html">
</map>

在该示例中，我们为同一张图像定义了两个不同的可点击区域。其中第一个<map>使用了name属性，第二个<map>使用了id属性。这两种方式都可以使用，并且在后续的JavaScript操作中也可以使用这些名称属性来获取可点击区域的信息。

总结

通过<map>标签和<area>标签，我们可以为一张图像创建多个可点击区域，实现在图像上进行交互的效果。其中，name属性是必须的，用于关联一个<img>标签，并标识可点击区域的范围。不同形状的可点击区域需要设置不同的shape属性，并通过coords属性定义具体坐标。