3.4 图像的超链接

3.4.1 整幅图像的超链接

对于给整幅图像设置超链接来说，实现的方法比较简单，与文本链接的实现方法类似。其语法格式如下：

在该语法中，href参数用来设置图像的链接地址，而在图像属性中可以添加图像的其他参数，如height、border、hspace等。

下面列举一个实例。新建一个 HTML 文件，首先应用＜img＞标签添加 5 张手机图片，并为其设置图像的超链接，然后应用＜img＞标签添加5个购物车图标。代码如下（实例位置：资源包\MR\源码\03\07）：

编辑完代码后，在浏览器中打开文件，可以看到如图3.8所示的页面。单击手机图片，页面将会跳转到一张展示商品详情的图片，如图3.9所示。

说明：本实例中使用了CSS样式，有关CSS的内容请参照第10章。

3.4.2 图像热区链接

除对整幅图像进行超链接的设置外，还可以将图像划分成不同的区域进行超链接设置。而包含热区的图像也可以称为映射图像。

在为图像设置热区链接时，大致需要经过以下两个步骤。

首先需要在图像文件中设置映射图像名。在添加图像的＜img＞标签中使用 usemap 属性添加图像要引用的映射图像的名称，语法格式如下：

然后需要定义热区图像及热区的链接，语法格式如下：

在该语法中，要先定义映射图像的名称，再引用这个映射图像。在＜area＞标签中定义了热区的位置和链接，其中，shape用来定义热区形状，可以取值为rect（矩形区域）、circle（圆形区域）及poly（多边形区域）；coords则用来设置区域坐标，对于不同的形状来说，coords设置的方式也不同。

● 对于矩形区域来说，coords包含4个参数，分别为left、top、right和bottom，也可以将这4个参数看作矩形两个对角的点坐标。

● 对于圆形区域来说，coords包含3个参数，分别为center-x、center-y和tadius，也可以看作圆形的圆心坐标（x， y）与半径的值。

● 对于多边形区域来说，设置坐标参数比较复杂，跟多边形的形状息息相关。coords 参数需要按照顺序（可以是逆时针，也可以是顺时针）取各个点的x、y坐标值。由于定义坐标比较复杂而且难以控制，所以在一般情况下使用可视化软件进行这种参数的设置。

下面列举一个实例。新建一个 HTML 文件，使用＜img＞标签添加图像，并且为图像添加热区链接。其代码如下（实例位置：资源包\MR\源码\03\08）：

编辑完代码后，在浏览器中运行文件，可以看到在打开的页面中包含一张图片，如图3.10所示。当单击图片中的“电脑精装”彩色会话框时，页面会跳转至一张电脑图片，如图 3.11所示。

说明：单击图片中的其他 3 个彩色会话框，页面将会跳转到对应的图片，本实例就不一一展示了。