3.4　图像的链接

3.4.1　为图像添加链接

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

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

下面通过一个实例，新建一个HTML文件，应用<img>标签添加5张手机图片，并为其设置链接，然后应用<img>标签添加5张购物车图标，代码如下：

编辑完代码后，在浏览器中运行，可以看到如图3.8所示的网页。单击手机图片，网页将跳转到该商品详情页，如图3.9所示。

3.4.2　图像热区链接

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

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

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

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

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

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

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

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

下面通过一个实例，新建一个HTML文件，然后使用<img>标签添加图片，并为图像添加热区链接。代码如下：

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