图像和超链接（拓展）

再学会使用图像和超链接标签后，我们再对其进行一些拓展。

说起图像，我们先来了解一下图像的几种基本格式（后缀名）：

1.GIF格式

GIF格式采用LZW压缩，是通过压缩相同颜色的色块来使图像文件变小的。由于LZW压缩不会造成任何品质上的损失，而且压缩效率高，再加上GIF格式在各种平台上都可以使用，所以很适合在互联网上使用，但它只能处理256色。

GIF格式适合商标、新闻式的标题或其他小于256色的图像。

LZW压缩是一种能将数据中重复的字符串加以编码制作成数据流的压缩法，通常应用于GIF图像文件的压缩。

2.JPEG格式

对于照片之类全彩的图像，通常以JPEG格式来进行压缩，也可以说，JPEG格式通常用来保存超过256色的图像。JPEG的压缩过程会造成一些图像数据的损失，所造成的“损失”是剔除了一些视觉上不容易觉察的部分。如果剔除适当，则不但在视觉上能够接受网页中设置超链接颜色，而且图像的压缩效率也会提高，使图像文件变小；反之，剔除太多图像数据，则会造成图像过度失真。

3.PNG格式

PNG格式是一种非破坏性的网页图像文件格式，它提供了将图像文件以最小的方式压缩却又不造成图像失真的技术。它不仅具备GIF图像格式的大部分优点，而且还支持48bit的色彩、更快的交错显示、跨平台的图像亮度控制、更多层的透明度设置。

4.GIF格式（常见的动态图片）

GIF是一种位图。位图的大致原理是：图片由许多的像素组成，每一个像素都被指定了一种颜色，这些像素综合起来就构成了图片。GIF采用的是LZW压缩算法，最高支持256种颜色。由于这种特性，GIF比较适用于色彩较少的图片，比如卡通造型、公司标志等等。在Web运用中，图像的文件量的大小将会明显地影响到下载的速度，因此我们可以根据GIF带调色板的特性来优化调色板，减少图像使用的颜色数（有些图像用不到的颜色可以舍去），而不影响到图片的质量。

一.实际开发中的路径问题

我们在实际开发中还会遇到图像和链接的添加问题，要使我们指定的图像在网页中对应位置显示，或是当我们点击某一个链接时能够跳转到某个指定的页面。都需要我们对文件的路径问题十分清楚。路径又分为绝对路径和相对路径。

1.绝对路径

图片和链接都可以是网站上的，也可以是本地的。但在使用文件的绝对路径时要把文件所在的整个位置全部导入进来。但当文件位置发生改变时，就会发生找不到文件的情况。这个时侯就要用到我们的相对路径来解决。

2.相对路径

相对路径即指定文件相对于我们html文件的位置，可以来自同级目录（直接使用图像名.后缀名），也可以是下级目录（图像所在目录/图像名.后缀名)，亦或是上级目录（../图像名.后缀名)。

在超链接中有一类链接为锚点链接，可以通过设置锚点的方式，点击该链接跳转到跳转到网页中任何一个指定位置。下面是锚点链接的设置方法：

·在链接文体的href属性时，设置属性值为#名字的形式。

·找到目标位置标签，里面添加一个id属性 = 刚才的名字。

分别说完图像和超链接之后，我们来讲讲图像的超链接及图像热区链接的问题。

二.图像的超链接

为图像设置超链的方法比较简单，主要在超链接标签内嵌套图像标签，即可通过点击图像的方式实现页面的跳转。其语法格式如下：

三.图像的热区链接

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

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

1.首先需要在图像文件中设置映射图像名。在添加图像的

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

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

对于矩形区域来说，coords包含4个参数，分别为left、top、right和bottom，也可以

将这4个参数看作矩形两个对角的点坐标。

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

对于多边形区域来说，设置坐标参数比较复杂，跟多边形的形状息息相关。