图像的处理

zhuyuansheng 2012-08-17

展开全文

图像的处理

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

6-1 背景图像的设定

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

设置背景图像的格式：

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

实例：6-1.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

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

实例：6-2-2.html

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

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

对其属性align的设定

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

实例：6-2-3.html

6-2-4 图片大小设定

实例：6-2-4.html

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

实例：6-2-5.html

6-3 图像的超链接

6-3-1 图像的超链接

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

实例：6-3-1.html

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

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

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

<img src="图形文件名" usemap="#图的名称">

    

<map name="图的名称">

    

    <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文件时播放）