3.3 创建热点区域

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

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

<img src="图片地址" usemap="#名称">
<map id="#名称">
<area shape="rect" coords="10,10,100,100" href="#">
<area shape="circle" coords="120,120,50" href="#">
<area shape="poly" coords="78,13,81,14,53,32,86,38" href="#">
</map>

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

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

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

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

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

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

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

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

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

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