3.4 图像热区超链接元素map、area

除了对整幅图像设置超链接外，还可以将图像划分为若干区域，叫作热区，每个热区可设置不同的超链接。此时，包含热区的图像称为映射图像，即带有可单击区域的图像。图像热区使用的不再是a元素，而是area元素。图像热区超链接的使用步骤如下。

1.通过﹤map﹥…﹤/map﹥标签定义图像地图

﹤map﹥标签用于图像映射。﹤map﹥…﹤/map﹥标签中可以包含一个以上的热区﹤area﹥标签，每个热区﹤area﹥标签都有独立的超链接。area元素始终嵌套在﹤map﹥…﹤/map﹥标签之中。语法格式为：

map元素中的name和id属性，在XHTML中，name属性已经废弃，使用id属性代替它。在HTML5中必须同时指定name和id属性相同的“映射图像名”。

area元素有两个重要属性：

1）shape属性：定义热区形状，它有以下3个值。

● circle：圆形区域。

● rect：矩形区域。

● poly：多边形区域。

2）coords属性：定义矩形、圆形或多边形区域的坐标。图像的左上角坐标是（0，0），x轴向右为正，y轴向下为正。coords属性的格式如下。

● 如果shape="circle"，则coords包含3个参数，分别为x、y和r。这3个参数是圆心坐标（x，y）和圆的半径r。

● 如果shape="rect"，则coords包含4个参数，分别为x1、y1、x2、y2。这4个参数分别是矩形的左上角的坐标（x1，y1）和右下角的坐标（x2，y2）。

● 如果shape="poly"，则coords需要按顺序取多边形各个顶点的坐标（x，y），因此形式为“x1，y1，x2，y2，…，xn，yn”，其数量必须是偶数。可以是逆时针，也可以是顺时针。HTML会按照定义顶点的顺序将它们连接起来，形成多边形热区。

2.将img元素的usemap属性与map元素的name、id属性相关联

在图像文件中设置映射图像名，格式为：

﹤img usemap="＃映射图像名"src="图像文件地址"…/﹥

img元素中的usemap属性要引用map元素的id或name属性，所以应同时向map元素添加id和name属性。也就是说，img元素的usemap属性的“映射图像名”必须与map元素的name和id属性的“映射图像名”相同，使得img元素的usemap属性与map元素的name、id属性相关联，以创建图像与映射之间的关系。

【例3-7】设计带有可点击区域的图像映射。本例文件3-7.html在浏览器中的显示效果如图3-8所示。