HTML讲堂第六课图像的处理图像的影像地图超链接

甜馍馍
综合知识
2009-09-06
85热度
0评论

图像可以使html页面美观生动且富有生机。浏览器可以显示的图像格式有jpeg，bmp，gif。其中bmp文件存储空间大，传输慢，不提倡用，常用的jpeg和gif格式的图像相比较，jpeg图像支持数百万种颜色，即使在传输过程中丢失数据，也不会在质量上有明显的不同，占位空间比gif大，gif图像仅包括265色彩，虽然质量上没有jpeg图像高，但占位储存空间小，下载速度最快、支持动画效果及背景色透明等特点。因此使用图像美画页面可视情况而决定使用那种格式。

6-1 背景图像的设定

在网页中除了可以用单一的颜色做背景外，还可用图像设置背景。

设置背景图像的格式：

其中 "image-url" 指图像的位置。

实例：6-1.html

<html> <head> <title>设置背景图像</title> </head> <body background="imge/11.gif"> <center> 盼望着，盼望着，东风来了，春天脚步近了. </center> </body> </html>

6-2 网页中插入图片标签<img>

网页中插入图片用单标签<img>，当浏览器读取到<img>标签时，就会显示此标签所设定的图像。如果要对插入的图片进行修饰时，仅仅用这一个属性是不够的，还要配合其它属性来完成。

插入图片标签<img>的属性

属性	描述
src	图像的url的路径
alt	提示文字
width	宽度通常只设为图片的真实大小以免失真,改变图片大小最好用图像工具.
height	高度通常只设为图片的真实大小以免失真,改变图片大小最好用图像工具.
dynsrc	avi文件的url的路径
loop	设定avi文件循环播放的次数
loopdelay	设定avi文件循环播放延迟
start	设定avi文件的播放方式
lowsrc	设定低分辨率图片,若所加入的是一张很大的图片，可先显示图片。
usemap	映像地图
align	图像和文字之间的排列属性
border	边框
hspace	水平间距
vlign	垂直间距

<IMG> 的格式及一般属性设定：

6-1-1 普通插入图片

实例：6-2-1.html

<html> <head> <title>普通插入图片</title> </head> <body> <BODY> <CENTER> <H2>爱在深秋</H2> <IMG src="../../imge/6-5.gif" _fcksavedurl="../../imge/6-5.gif"> </CENTER> 秋雨无声无息地下着。 飒飒的秋风不可一世地横行在萧条的郊外。无力与秋风抗争的枯叶，只能带着丝丝牵挂，无可奈何地飘离留恋的枝头。秋蝉哀弱的残声逐渐地少了，地上落叶多了…… 黄昏，我漫步在郊外的林间，想细细地品味秋雨的凄冷。 然而，“雨到深秋易作霖，萧萧难会此时心”，此时，又有谁能听我诉说心中的那份情怀呢？ </body> </html>

6-2-2 设定上下左右空白位置 hspace/vspace

实例：6-2-2.html

<html> <head> <title>设定图像与文本之间的距离</title> <body> <img src="../../imge/6-5.gif" _fcksavedurl="../../imge/6-5.gif" align="left" hspace="20" vspace="20"> 秋雨无声无息地下着。 飒飒的秋风不可一世地横行在萧条的郊外。无力与秋风抗争的枯叶，只能带着丝丝牵挂，无可奈何地飘离留恋的枝头。秋蝉哀弱的残声逐渐地少了，地上落叶多了…… 黄昏，我漫步在郊外的林间，想细细地品味秋雨的凄冷。 然而，“雨到深秋易作霖，萧萧难会此时心”，此时，又有谁能听我诉说心中的那份情怀呢？ </body> </html>

6-2-3 设定字画对其方式

图像和文字的之间的对齐是通过align属性来设定的， align的对齐方式有两种：即绝对对齐和相对对齐。绝对对齐方式的效果和文字一样，只有三种：居中（middle）、居左（left）、居右（right）。相对文字对齐方式是指图像与一行文字的相对位置。

对其属性align的设定

属性值	对齐方式
top	上对齐
middle	居中对齐
bottom	下对齐
left	左对齐
right	右对齐

实例：6-2-3.html

<html> <head> <title>控制图像相对于文字基准线的水平对齐方式</title> </head> <body> <img src="../../imge/6-2.jpg" _fcksavedurl="../../imge/6-2.jpg" align="left"> 此图像相对于文字基准线为靠上对齐的多行文字 试想在圆月朦胧之夜，海棠是这样的妩媚而嫣润；枝头的好鸟为什么却双栖而各梦呢？在这夜深人静的当儿，那高踞着的一只八哥儿，又为何尽撑着眼皮儿不肯睡去呢？他到底等什么来着？舍不得那淡淡的月儿么？舍不得那疏疏的帘儿么？不，不，不，您得到帘下去找，您得向帘中去找——您该找着那卷帘人了？他的情韵风怀，原是这样这样的哟！朦胧的岂独月呢；岂独鸟呢？但是，咫尺天涯，教我如何耐得？ 我拚着千呼万唤；你能够出来么？ 这页画布局那样经济，设色那样柔活，故精采足以动人。虽是区区尺幅，而情韵之厚，已足沦肌浃髓而有余。我看了这画。瞿然而惊：留恋之怀，不能自已。故将所感受的印象细细写出，以志这一段因缘。但我于中西的画都是门外汉，所说的话不免为内行所笑。——那也只好由他了。 <hr color="#00ff00"> <img src="../../imge/6-2.jpg" _fcksavedurl="../../imge/6-2.jpg" align="right"> 此图像相对于文字基准线为靠上的多行文字对齐 试想在圆月朦胧之夜，海棠是这样的妩媚而嫣润；枝头的好鸟为什么却双栖而各梦呢？在这夜深人静的当儿，那高踞着的一只八哥儿，又为何尽撑着眼皮儿不肯睡去呢？他到底等什么来着？舍不得那淡淡的月儿么？舍不得那疏疏的帘儿么？不，不，不，您得到帘下去找，您得向帘中去找——您该找着那卷帘人了？他的情韵风怀，原是这样这样的哟！朦胧的岂独月呢；岂独鸟呢？但是，咫尺天涯，教我如何耐得？ 我拚着千呼万唤；你能够出来么？ 这页画布局那样经济，设色那样柔活，故精采足以动人。虽是区区尺幅，而情韵之厚，已足沦肌浃髓而有余。我看了这画。瞿然而惊：留恋之怀，不能自已。故将所感受的印象细细写出，以志这一段因缘。但我于中西的画都是门外汉，所说的话不免为内行所笑。——那也只好由他了。 <hr color="#00ff00"> <img src="../../imge/6-2.jpg" _fcksavedurl="../../imge/6-2.jpg" align="top"> 此图像相对于文字基准线为顶部单行对齐 <hr color="#00ff00"> <img src="../../imge/6-2.jpg" _fcksavedurl="../../imge/6-2.jpg" align=bottom> 此图像相对于文字基准线为底线单行对齐 <hr color="#00ff00"> <img src="../../imge/6-2.jpg" _fcksavedurl="../../imge/6-2.jpg" align="middle"> 此图像相对于文字基准线为置中单行对齐 <a href="#" _fcksavedurl="#" onClick="javascript:window.history.back()">返回</a> </body> </html>

6-2-4 图片大小设定

实例：6-2-4.html

<html> <head> <title>图像大小的设定</title> </head> <body> <center> 缩小图像 <img src="../../imge/6-3.gif" _fcksavedurl="../../imge/6-3.gif" width="350" height="200"> 原图显示 <img src="../../imge/6-3.gif" _fcksavedurl="../../imge/6-3.gif" width="400" height="236"> 放大图像 <img src="../../imge/6-3.gif" _fcksavedurl="../../imge/6-3.gif" width="500" height="250"> </center> </body> </html>

6-2-5 图像边框的设定

实例：6-2-5.html

<html> <head> <title>设定图像的边框</title> </head> <body> <center> <div align="center"> <pre><img src="../../imge/xjbjtp22.jpg" _fcksavedurl="../../imge/xjbjtp22.jpg" border="10"></pre> </div> </body> </html>

6-3 图像的超链接

6-3-1 图像的超链接

图像的链接和文字的链接方法是一样的，都是用<a>标签来完成，只要将<img>标签放在<a>和</a>只见就可以了。用图像链接的图片的上有蓝色的边框，这个边框颜色也可以在<body>标签中设定。

实例：6-3-1.html

<html> <head> <title>使用图像为选取的对象</title> </head> <body> <h1 align="center">图片的超链接</h1> <center> <a href="http://www.sohu.com/" _fcksavedurl="http://www.sohu.com/" target="_blank"><img alt="搜狐网站" src="../../imge/logo[1].gif" _fcksavedurl="../../imge/logo[1].gif"></a> <a href="http://www.baidu.com/" _fcksavedurl="http://www.baidu.com/"><img alt="百度搜索" src="../../imge/logo[2].gif" _fcksavedurl="../../imge/logo[2].gif"></a> <a href="http://www.sina.com.cn" _fcksavedurl="http://www.sina.com.cn"><img alt="新浪网站" src="../../imge/logo(3).gif" _fcksavedurl="../../imge/logo(3).gif"></a> </center> </body> </html>

6-3-2 图像的影像地图超链接

在HTML中还可以把图片划分成多个热点区域，每一个热点域链接到不同网页的资源。这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行超链接。这就是影像地图。要完成地图区域超链接要用到三种标签：<img><map><area>下面分别介绍这些标签的用法：

影像地图（Image Map）标签的使用格式：

<area shape=形状 coords=区域座标列表 href="URL资源地址">
 ......可根据需要定义多少个热点区域
 <area shape=形状 coords=区域座标列表 href="URL资源地址">

</map>

【1】shape -- 定义热点形状

shape=rect：矩形
shape=circle：圆形
shape=poly：多边形

【2】coords -- 定义区域点的坐标

a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标
例：<area shape=rect coords=100,50,200,75 href="URL">

b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度
例：<area shape=circle coords=85,155,30 href="URL">

c.任意图形（多边形）：将图形之每一转折点座标依序填入
例：<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">

在制作本文介绍的效果时应注意的几点：

1、在<img>标记不要忘记设置usemap参数，且usemap的参数值必须与<map>标记中的name参数值相同，也就是说，“图像地图名称”要一致；

2、同一“图像地图”中的所有热点区域都要在图像地图的范围内，即所有<area>标记均要在<map>与</map>之间；

3、在<area>标记中的 cords 参数设定的坐标格式要与shape参数设定的作用区域形状配套，避免出现在shape参数设置的矩形作用区域，而在cords 中设置的却是多边形区域顶点坐标的现象出现。

实例 6-3-2.html

6-4 用<img>标签插入avi文件

格式：<img dynsrc="avi文件地址">

<img>标签插入avi文件的属性

属性	描述
dynsrc	指定avi文件所在路径
loop	设定avi文件循环次数
loopdelay	设定avi文件循环延迟
start	设定文件播放方式fileopen/mouseover(网页打开时即播放/当鼠标滑到avi文件时播放）

实例：6-4.html

<html> <head> <title>设定图像的边框</title> </head> <body> <center> <img dynsrc="../../imge/mmm.avi" _fcksavedurl="../../imge/mmm.avi" loop="-1" start="mouseover"> </center> </body> </html>

HTML讲堂第六课 图像的处理 图像的影像地图超链接

HTML讲堂第六课图像的处理图像的影像地图超链接