HTML：使用图像

第四章：使用图像

4.1图像的格式

网页中的图片格式通常有三种，即GIF，JPEG，和PNG。
1. GIF，Graphic Interchange Format，文件最多可以使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像。其最大优点是可以制作动态图像，其另一优点是将图像以交错的方式在网页中呈现，所谓交错显示，就是当图像尚未下载完成时，浏览器会先以马赛克的形式将图像慢慢显示，让浏览者可以大致猜出下载图像的雏形。
2. JPEG,Joint Photographic Experts Group,此文件格式适合用于摄影或连续色调图像的高级格式，可包含数百万种颜色。JPEG格式是一种压缩的非常紧密的格式，专用于不含大色块的图像。
3. PNG格式，Portable Network Graphics，是一种非破坏性的网页图像文件格式，它提供了将图像文件以最小的方式压缩却又不造成图像失真的技术。它不仅具备GIF图像格式的优点，而且还支持48位的色彩、更快的交错显示、跨平台的图像亮度控制、更多曾的图像透明度设置。

4.2 插入图象

插入图象的标记只有一个，那就是img标记。
### **4.2.1插入图像标记img
图像是网页构成中最重要的元素之一，img元素的相关属性如下表：

属性	描述
src	图像的源文件
alt	提示文字
width，height	宽度和高度
border	边宽
vspace	垂直间距
hspace	水平间距
align	排列
dynsrc	设定avi文件的播放
loop	设定avi文件循环播放的次数
lopdelay	设置avi循环播放延迟
start	设定avi文件播放方式
lowsrc	设定低分辨率图片
usemap	映像地图

4.2.2图像的源文件src

src属性是指图像源文件所在的路径，它是图像必不可少的属性。
语法：

<img src="图像文件的地址">

说明：这一路径可以是绝对路径，也可以是相对路径。可以使用文件和http://关键字作为图像的地址，并且能够用于在网页上加载图片。

4.2.3图像的提示文字alt

提示文字有两个作用，第一个是，当浏览网页时，如果图片下载完成，将鼠标指针放在该图像上，鼠标指针旁边会出现提示性文字。第二个作用是，如果图片没有被下载，在图像的位置上会显示提示文字。
语法：

<img src="图像文件的地址" alt="提示文字的内容">

说明：提示的内容可以是中文，也可以是英文。

4.2.4图像的宽度和高度

width和height属性用来定义图片的宽度和高度，如果元素不定义高度和宽度，图片就会显示原始尺寸。

<img src="图片的地址" width="图片的宽度" height="图片的高度">

说明：在该语法中，图像的高度和宽度的单位是像素。

4.3 图像的超链接

除了文字可以添加超链接外，图像也可以设置超链接属性。同一个图像的不同部分也可以链接至不同的文档，这就是热区链接。

4.3.1 图像的超链接

图像的链接和文字的链接是一样的，都是使用a标签来完成
语法：

<a href="链接地址"><img src="图像文件的地址">a>

说明：href参数用来设置图像的链接地址。

图像的热区链接

在HTML中可以把图片划分为多个热点取余，每一个热点区域链接到不同的网页
语法：
首先在图像文件中设置映像图像名，在图像的属性中使用usemap标记添加添加图像要引用的映射图象的名称如下：

<img src="图像地址" usemap ="映像图像名称">

然后需要定义热区图像以及连接属性如下：

<map name="映像图像名称">
<area shape="热区形状" coords="热区坐标" href="链接地址">
map>

说明：在该语法中要先定义映射图象的名称，然后再引用这个映像图像。在area标记中定义了热区的位置和链接。对于不同形状来说，coords设置的方式也不同。