下载掌阅APP，畅读海量书库
立即打开
除了文字可以作为超链接外，图片也可以作为超链接。给图片设置超链接，与文字链接类似，编写格式如下。
图片加上链接标签后，其默认有1像素粗的蓝色边框（类似于文字链接的蓝色下画线）。可通过图片标签的border属性对其边框粗细进行修改。
注意 ：如果不需要链接图片有边框，可设置border属性为0。
在D:\web\目录下创建网页文件，命名为img_a.htm，编写代码如代码5.6所示。
代码5.6 图片链接设置：img_a.htm
在浏览器地址栏输入http://localhost/img_a.htm，浏览效果如图5.6所示。
图5.6 图片链接设置
除了对整个图片设置超级链接外，还可将图片划分为多个区域，而每个区域可设置不同的超级链接，这些区域叫做“热区”。包含热区的图像可以称为映射图片。
要进行热区设置，首先需要在图片标签中设置映射名称，编写格式如下。
这里使用图片标签的usemap属性，用于定义图片的映射名称。
注意 ：映射名称用于标识，读者可以自己定义。
然后，就要定义各个热区及超级链接了，编写格式为：
这里学习两个新标签，双标签<map></map>和单标签<area/>。<map></map>标签用于包含多个<area/>标记，其中的“映射名称”就是在<img>标记中定义的名称。<area>标记则用于定义各个热区和超链接，它有两个重要属性，shape和coords。shape属性用于定义热区形状，它有4个值。
（1）default：默认值，为整幅图片。
（2）rect：矩形区域。
（3）circle：圆形区域。
（4）poly：多边形区域。
coords属性用于定义矩形、圆形或多边形区域的坐标。编写规则如下。
（1）如果热区形状为矩形区域，则coords包含4个参数，分别为left、right、top和bottom。也可以将这4个参数看成矩形左上角和右下角顶点的坐标。
（2）如果热区形状为圆形区域，则coords包含3个参数，分别为center-x、center-y和radius，这3个参数是圆心坐标和圆的半径。
（3）如果热区形状为多边形区域，则coords需要按顺序取多边形各个顶点的（x、y）坐标值，因此形式为“x1，y1，x2，y2，……”浏览器会按照定义顶点的顺序将它们连接起来，形成多边形热区。
图片可看做二维坐标系，其左上角坐标是（0，0），x轴向右、y轴向上为正，坐标数值单位为像素。
说明 ：手写HTML代码定义热区链接比较麻烦，需要制作者有很强的空间思维能力。推荐使用Dreamweaver设计视图制作，用鼠标拖拽可直接绘制热区链接。
在D:\web\目录下创建网页文件，命名为img_map.htm，编写代码如代码5.7所示。
代码5.7 图片热区链接设置：img_map.htm
笔者在图片上定义了一个圆形热区链接，圆心位置坐标为（115，26）像素，半径为26像素。在img.jpg这幅猫的图片上，其位置为猫头的圆形位置，链接提示文字为“这是链接区域”。在浏览器地址栏输入http://localhost/img_map.htm，浏览效果如图5.7所示。
图5.7 图片热区链接