3.3 创建热点区域

在浏览网页时读者会发现，当单击一张图片的不同区域时会显示不同的链接内容，这就是图片的热点区域。所谓图片的热点区域，就是将一个图片划分成若干个链接区域。访问者单击不同的区域会链接到不同的目标页面。

在HTML中，可以为图片创建3种类型的热点区域：矩形、圆形和多边形。创建热点区域使用标记<map>和<area>，语法格式如下：

在上面的语法格式中，需要读者注意以下几点：

（1）要想建立图片热点区域，必须先插入图片。注意，图片必须增加usemap属性，说明该图像是热区映射图像，属性值必须以“#”开头，如#pic。那么上面一行代码可以修改为：<img src="图片地址"usemap="#pic">。

（2）<map>标记只有一个属性id，其作用是为区域命名，属性值必须与<img>标记的usemap属性值相同，修改上述代码为：<map id="#pic">。

（3）<area>标记主要是定义热点区域的形状及超链接，它有三个相应的属性。

● shape属性，控件划分区域的形状，其取值有3个，分别是rect（矩形）、circle（圆形）和poly（多边形）。

● coords属性，控制区域的划分坐标。

◆ 如果shape属性取值为rect，那么coords的设置值分别为矩形的左上角x、y坐标点和右下角x、y坐标点，单位为像素。

◆ 如果shape属性取值为circle，那么coords的设置值分别为圆形圆心x、y坐标点和半径值，单位为像素。

◆ 如果shape属性取值为poly，那么coords的设置值分别为多边形在各个点的x、y坐标，单位为像素。

● href属性是为区域设置超链接的目标，设置值为“#”时，表示为空链接。