第四章 使用图像
4.1 图像的格式
GIF格式
JPEG格式
PNG格式
4.2 插入图像
4.2.1 插入图像标记img
img元素的属性定义
属性 | 描述 |
src | 图像的源文件 |
alt | 提示文字 |
width,height | 宽度和高度 |
border | 边框 |
vspace | 垂直间距 |
hspace | 水平间距 |
align | 排列 |
dynsrc | 设定avi文件的播放 |
loop | 设定avi文件循环播放次数 |
loopdelay | 设定avi文件循环播放延迟 |
start | 设定avi文件播放方式 |
lowsrc | 设定低分辨率图片 |
usemap | 映像地图 |
4.2.2 图像的源文件src
src属性用于指定图像源文件所在路径，它是图像必不可少的属性
语法：<imag src="图像的地址">
说明：地址可以是绝对路径，也可以是相对路径
eg:
<html>
<head>
<meta charset="UTF-8">
<title>图片展示</title>
</head>
<body>
<img src="image/pal4/yth.bmp" width="800" height="600">
</body>
</html>
运行结果：
4.2.3 图像的提示文字alt
当图像没有加载成功时，图像位置会出现提示性文字
语法： <img src="图像地址" alt="提示性文字">
eg: 故意写错文件名，让图片加载失败
<html>
<head>
<meta charset="UTF-8">
<title>图片展示</title>
</head>
<body>
<img src="image/pal4/yth1.bmp" alt="我命由我不由天" width="800" height="600" align="right">
</body>
</html>
运行结果：
4.2.4 图像的宽度和高度 width height
width和height属性用来定义图片的高度与宽度 ，如果<img> 元素不定义高度和宽度，图片按照原来尺寸显示
语法： <img src="图像地址" width="图像宽度" height="图像高度">
说明：图像高度和宽度单位都是像素
无论width和height设置为多大，整个图像都会被下载，即使width和height设置得很小，图像加载速度也不会很快。
eg:
<html>
<head>
<meta charset="UTF-8">
<title>图片展示</title>
</head>
<body>
<img src="image/pal4/yth.bmp" width="800" height="600">
<img src="image/pal4/yth.bmp" width="400" height="300">
<img src="image/pal4/yth.bmp">
</body>
</html>
运行结果：
4.2.5 图像的边框border
默认情况下，图像是没有边框的，通过border属性可以为图像添加边框。可以设置边框宽度，但边框的颜色是不可以设置的。当图像上没有添加链接时，边框的颜色默认黑色；当图像上添加了链接时，边框的颜色和链接的颜色一致，默认为深蓝色。
语法： <img src="图像地址" border="图像边框宽度">
说明：border的单位是像素，值越大边框越宽。
eg:
<html>
<head>
<meta charset="UTF-8">
<title>图片展示</title>
</head>
<body>
<img src="image/pal4/yth.bmp" width="400" height="300">
<img src="image/pal4/yth.bmp" width="400" height="300" border="5">
</body>
</html>
运行结果：
4.2.6 图像的垂直边距 vspace
垂直边距vspace用来调整图像与文字的垂直边距
语法： <img src="图像地址" vspace="垂直边距">
说明：vspace属性的单位是像素
eg:
<html>
<head>
<meta charset="UTF-8">
<title>图片展示</title>
</head>
<body>
夙玉，<img src="image/pal4/yth.bmp" width="400" height="300" align="right" vspace="10">
你看这云海雾松，当真是美不胜收，只是这世上没有了你，
即使再有千般美景，却也无趣得很。……石沉溪洞……洞悉尘世……哈哈哈，这世上又有几人真能做到，求个问心无愧已是很不容易了……（云天青）
死生在手，变化由心，地不能埋，天不能煞，此之为我命在我也，不在于天。（夙玉）
嘘为云雨，嘻为雷霆。通天彻地，出幽入明，千变万化，何者非我！（魁召）
水之润下，无孔不入；火之炎上，无物不焚；雷之肃敛，无坚不摧；风之肆拂，无阻不透；土之养化，无物不融！
这玩意怪模怪样，外面壳好像很硬，还绑了绳子，古怪。……唔……唔……唔，不好吃、不好吃！三两口就吃完了，外面的壳还嚼不烂！（云天河吃粽子）
</body>
</html>
运行结果：
4.2.7 图像的水平边距 hspace
水平边距hspace用来调整图像与文字的水平边距
语法： <img src="图像地址" hspace="水平边距">
说明：hspace属性的单位是像素
eg:
<html>
<head>
<meta charset="UTF-8">
<title>图片展示</title>
</head>
<body>
夙玉，<img src="image/pal4/yth.bmp" width="400" height="300" align="right" hspace="50">
你看这云海雾松，当真是美不胜收，只是这世上没有了你，
即使再有千般美景，却也无趣得很。……石沉溪洞……洞悉尘世……哈哈哈，这世上又有几人真能做到，求个问心无愧已是很不容易了……（云天青）
死生在手，变化由心，地不能埋，天不能煞，此之为我命在我也，不在于天。（夙玉）
嘘为云雨，嘻为雷霆。通天彻地，出幽入明，千变万化，何者非我！（魁召）
水之润下，无孔不入；火之炎上，无物不焚；雷之肃敛，无坚不摧；风之肆拂，无阻不透；土之养化，无物不融！
这玩意怪模怪样，外面壳好像很硬，还绑了绳子，古怪。……唔……唔……唔，不好吃、不好吃！三两口就吃完了，外面的壳还嚼不烂！（云天河吃粽子）
</body>
</html>
运行结果：
提示：使用hspace和vspace属性会在图像周围对称加入空格。hsapce属性在图像两侧加入空格，而vspace属性在图像顶部和底部加入相同的空格。
4.2.8 图像的排列align
图像和文字之间的对齐是通过align属性来设定的，align的对齐方式有两种：绝对对齐和相对对齐。绝对对齐的效果和文字一样，只有三种：居中（middle）、居左（left）、居右（right）。相对对齐方式是指图像与一行文字的相对位置。
语法： <img src="图像地址" align="对齐方式">
说明：align取值见下表
align属性的属性值定义
属性 | 描述 |
bottom | 图片的底部和当前行的文字的底部对齐 |
top | 图片的顶端与当前行的文字的顶端对齐 |
middle | 图片水平中线和当前行的文字中线对齐 |
left | 图片左对齐 |
center | 图片水平中线和当前行的文字中线对齐 |
right | 图片右对齐 |
eg:
<html>
<head>
<meta charset="UTF-8">
<title>图片展示</title>
</head>
<body>
夙玉，<img src="image/pal4/yth.bmp" width="400" height="300" align="right" hspace="50">
你看这云海雾松，当真是美不胜收，只是这世上没有了你，
即使再有千般美景，却也无趣得很。……石沉溪洞……洞悉尘世……哈哈哈，这世上又有几人真能做到，求个问心无愧已是很不容易了……（云天青）
死生在手，变化由心，地不能埋，天不能煞，此之为我命在我也，不在于天。（夙玉）
嘘为云雨，嘻为雷霆。通天彻地，出幽入明，千变万化，何者非我！（魁召）
水之润下，无孔不入；火之炎上，无物不焚；雷之肃敛，无坚不摧；风之肆拂，无阻不透；土之养化，无物不融！
这玩意怪模怪样，外面壳好像很硬，还绑了绳子，古怪。……唔……唔……唔，不好吃、不好吃！三两口就吃完了，外面的壳还嚼不烂！（云天河吃粽子）
<hr>
夙玉，<img src="image/pal4/yth.bmp" width="400" height="300" align="left" hspace="50">
你看这云海雾松，当真是美不胜收，只是这世上没有了你，
即使再有千般美景，却也无趣得很。……石沉溪洞……洞悉尘世……哈哈哈，这世上又有几人真能做到，求个问心无愧已是很不容易了……（云天青）
死生在手，变化由心，地不能埋，天不能煞，此之为我命在我也，不在于天。（夙玉）
嘘为云雨，嘻为雷霆。通天彻地，出幽入明，千变万化，何者非我！（魁召）
水之润下，无孔不入；火之炎上，无物不焚；雷之肃敛，无坚不摧；风之肆拂，无阻不透；土之养化，无物不融！
这玩意怪模怪样，外面壳好像很硬，还绑了绳子，古怪。……唔……唔……唔，不好吃、不好吃！三两口就吃完了，外面的壳还嚼不烂！（云天河吃粽子）
<hr>
夙玉，<img src="image/pal4/yth.bmp" width="400" height="300" align="middle" hspace="50">
你看这云海雾松，当真是美不胜收，只是这世上没有了你，
即使再有千般美景，却也无趣得很。……石沉溪洞……洞悉尘世……哈哈哈，这世上又有几人真能做到，求个问心无愧已是很不容易了……（云天青）
死生在手，变化由心，地不能埋，天不能煞，此之为我命在我也，不在于天。（夙玉）
嘘为云雨，嘻为雷霆。通天彻地，出幽入明，千变万化，何者非我！（魁召）
水之润下，无孔不入；火之炎上，无物不焚；雷之肃敛，无坚不摧；风之肆拂，无阻不透；土之养化，无物不融！
这玩意怪模怪样，外面壳好像很硬，还绑了绳子，古怪。……唔……唔……唔，不好吃、不好吃！三两口就吃完了，外面的壳还嚼不烂！（云天河吃粽子）
<hr>
夙玉，<img src="image/pal4/yth.bmp" width="400" height="300" align="center" hspace="50">
你看这云海雾松，当真是美不胜收，只是这世上没有了你，
即使再有千般美景，却也无趣得很。……石沉溪洞……洞悉尘世……哈哈哈，这世上又有几人真能做到，求个问心无愧已是很不容易了……（云天青）
死生在手，变化由心，地不能埋，天不能煞，此之为我命在我也，不在于天。（夙玉）
嘘为云雨，嘻为雷霆。通天彻地，出幽入明，千变万化，何者非我！（魁召）
水之润下，无孔不入；火之炎上，无物不焚；雷之肃敛，无坚不摧；风之肆拂，无阻不透；土之养化，无物不融！
这玩意怪模怪样，外面壳好像很硬，还绑了绳子，古怪。……唔……唔……唔，不好吃、不好吃！三两口就吃完了，外面的壳还嚼不烂！（云天河吃粽子）
<hr>
夙玉，<img src="image/pal4/yth.bmp" width="400" height="300" align="top" hspace="50">
你看这云海雾松，当真是美不胜收，只是这世上没有了你，
即使再有千般美景，却也无趣得很。……石沉溪洞……洞悉尘世……哈哈哈，这世上又有几人真能做到，求个问心无愧已是很不容易了……（云天青）
死生在手，变化由心，地不能埋，天不能煞，此之为我命在我也，不在于天。（夙玉）
嘘为云雨，嘻为雷霆。通天彻地，出幽入明，千变万化，何者非我！（魁召）
水之润下，无孔不入；火之炎上，无物不焚；雷之肃敛，无坚不摧；风之肆拂，无阻不透；土之养化，无物不融！
这玩意怪模怪样，外面壳好像很硬，还绑了绳子，古怪。……唔……唔……唔，不好吃、不好吃！三两口就吃完了，外面的壳还嚼不烂！（云天河吃粽子）
<hr>
夙玉，<img src="image/pal4/yth.bmp" width="400" height="300" align="bottom" hspace="50">
你看这云海雾松，当真是美不胜收，只是这世上没有了你，
即使再有千般美景，却也无趣得很。……石沉溪洞……洞悉尘世……哈哈哈，这世上又有几人真能做到，求个问心无愧已是很不容易了……（云天青）
死生在手，变化由心，地不能埋，天不能煞，此之为我命在我也，不在于天。（夙玉）
嘘为云雨，嘻为雷霆。通天彻地，出幽入明，千变万化，何者非我！（魁召）
水之润下，无孔不入；火之炎上，无物不焚；雷之肃敛，无坚不摧；风之肆拂，无阻不透；土之养化，无物不融！
这玩意怪模怪样，外面壳好像很硬，还绑了绳子，古怪。……唔……唔……唔，不好吃、不好吃！三两口就吃完了，外面的壳还嚼不烂！（云天河吃粽子）
</body>
</html>
运行结果：
4.3 图像的超链接
除了文字可以添加超链接之外，图像也可以设置超链接属性。同一个图像的不同部分也可以链接到不同的文档，这就是热区链接。
4.3.1 图像的超级链接
和文字超链接一样，只需将<img>放在<a></a>内即可
语法：<a href="链接地址"><img src="图像文件的地址"></a>
eg：
<html>
<head>
<meta charset="UTF-8">
<title>图片超链接</title>
</head>
<body>
<a href="http://www.baidu.com">
<img src="image/pal4/yth.bmp" width="400" height="300" align="right" hspace="50">
</a>
</body>
</html>
运行结果：
点击图片后：
提示：图像链接与文字链接相同。链接到一个HTTP站点，需要在网址前使用http:// 不能省略
同理,创建E-mail链接需要将mailto:// 添加到E-mail地址前面
4.3.2 图像热区链接
在HTML中可以把图片划分成多个热点区域，每一个热点区域链接到不同的网页。这种效果的实质是把一副图片划分为不同的热点区域，再让不同的区域进行超链接，这就是映射地图。
图像热区链接
除了对整幅图像设置超链接外，还可以将图像划分为若干区域，这叫做"热区"，每个区域可设置不同的超链接。此时，包含热区的图像可以称为映射图像。
要进行热区设置，首先需要在图像文件中设置映射图像名，格式为：
映射图像名称>
也就是说，此时需要使用<img>标记的usemap属性，定义图像的映射图像名。
然后，就要在图像中定义各个热区以及超链接了，主要语法为：
映射图像名称>
<area shape = 热区形状1 coords = 热区坐标1 href = 链接地址1>
<area shape = 热区形状2 coords = 热区坐标2 href = 链接地址2>
……
<area shape = 热区形状n coords = 热区坐标n href = 链接地址n>
</map>
在该语法中又引入了两个标记：<map>和<area>。<map>、</map>标记用于包含多个<area>标记，其中的"映射图像名称"就是在<img>标记中定义的名称。<area>标记则用于定义各个热区和超链接，它有两个重要属性：
（1）shape属性：用来定义热区形状，它有三个值：
● default：默认值，为整幅图像。
● rect：矩形区域。
● circle：圆形区域。
● poly：多边形区域。
（2）coords属性：用来定义矩形、圆形或多边形区域的坐标。它的格式如下：
● 如果shape = "rect"，则coords包含四个参数，分别为left、top、right和bottom，也可以将这四个参数看成矩形左上角和右下角顶点的坐标。
● 如果shape = "circle"，则coords包含三个参数，分别为center-x、center-y和radius，这三个参数是圆心坐标和圆的半径。
● 如果shape = "poly"，则coords需要按顺序取多边形各个顶点的（x、y）坐标值，因此形式为"x1, y1, x2, y2, …… xn, yn"。可以是逆时针，也可以是顺时针。HTML会按照定义顶点的顺序将它们链接起来，形成多边形热区。
如果要定义的热区形状复杂，都可以用多边形热区来逼近，所以如果shape = "poly"，则coords可能包含很多坐标值，其数量必须是偶数。
图像的左上角坐标是（0, 0），x轴向右、y轴向下为正。
eg:(注：dreamweaver可视化工具可以直接拖拽区域设置链接自动生成代码)
<html>
<head>
<meta charset="UTF-8">
<title>图片超链接</title>
</head>
<body>
<img src="image/pal4/yth.bmp" width="800" height="600" usemap="Map">
<map name="Map">
<area shape="rect" coords="0,0,800,200" href="http://www.baidu.com">
<area shape="circle" coords="400,300,100" href=> <!--中间一个圆形链接到csdn主页-->
<area shape="poly" coords="100,600,100,700,200,500,300,559,400,800,100,600" href="http://www.hao123.com"> <!--第三部分随意画一个多边形-->
</map>
</body>
</html>
运行结果：
点击后：
第二块热区 热区上鼠标变手型
点击后：
第三块热区：
点击后：
非热区，鼠标不变型，点击也没反应：
第四章小结：
插入图像：
<img src="图片地址" alt="提示性文字" width="图片宽度" height="图片高度" border="边框大小">
<img src="图片地址" vspace="图片与文字的垂直间距" hspace="图片与文字的水平间距">
<img src="图片地址" align="图片与网页上文字的对齐方式">
图像超链接：
<a href="链接地址"><img src="图片地址"></a>
图像热区链接：（映射地图）
映射图像名称X>
映射图像名称X>
<area shape = "rect" coords = "x1,y1,x2,y2" href = 链接地址1>
<area shape = "circle" coords = "x,y,r" href = 链接地址2>
……
poly" coords ="x1,y1,x2,y2,......,xn,yn,x1,y1" href = 链接地址n> //多边形各个坐标
