分享
 
 
 

HTML进阶应用技巧(四)用好基本图像标记img

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

网页中最引人入胜的莫过于那丰富多彩的图像了。成功的站点中不能没有绚丽的图像,否则便使测览者觉得索然无味。下面介绍HTML语言中的基本图像标记:<img>。其基本语法结构如下:

<img

align=top|middle|center|bottom|left|right

class=type

id=Value

name=value

src=url

title=text

alt=value

border=n

height=n

width=n

hspace=n

vspace=n

ismap=image

usemap=url

onload=function

onabort=function

onerror=function

dynsrc=url

controls=controls

loop=n

start=type>

可以看出,关于基本图像标记<img>的应用参数多达21项。当然,我们实际应用的只是其中几项,只有在需要实现特殊效果的情况下,才需要使用较多的参数。下面先介绍一下各参数的具体含义:

align:是指定图像的位置是靠左、靠右、居中、靠上或者是靠底。默认情况下是靠上,即align=top。在图文混排时,这个参数很有用。

class和id:分别指定图像所属的类型和图像的id号。

name:用于设定图像的名称。

src:规定插入的图像的url地址,也就是含路径的图像文件名。

title:设定图像的标题。

alt:表示图像的替代字,主要用于在浏览器还没有装入图像(或关闭图像显示)的时候,先显示有关此图像的信息。这是初学者最易忽略的参数,因不设定它在正常显示时没问题。

border:设定图片的边框。

height和width:分别用于指定图像的高度和宽度,可以与图片原来的宽度和高度不同。

hspace和vspace:分别用于设定图像的左右边框大小和上下边框大小,在图文混排时会用到。

ismp和usemap:在应用图像地图时使用。ismap表示图像地图的数据存放在服务器中,当鼠标在图像上的某个区域上时,可以将此区域的坐标传送给服务器处理。usemap则用于设定图像地图的名称。

onload、onabort、onerror对应于设定的子程序,分别在图像被载入、取消载入、载入出错的情况下各自对应的子程序,不常用。

dynsrc:指定要下载的影像片断的url地址。

controls:设定影像播放的控制接钮。

loop:指定影像片断的播放次数,当loop=-1时,影像片断将循环播放直至页面更新。

start:设定何时开始播放影像片断,有三种选择:start=fileopen表示页面载入后即开始播放,默认的就是这种状态;start=mouseover表示当鼠标移到影像上即开始播放;start=fileopen,mouseover表示当有上面两种情况之一发生时就开始播放。

应用技巧

1、给图片加边框

上边这张图片的边框是border="4"所产生的效果,注意:边框的颜色默认的是黑色,不美观,而<img>标记也没有设置边框颜色的参数,我们可以通过设置Class参数调用CSS达到改变边框颜色的目的,如本例的完整代码是:

<img src="/images/logo.gif" width="180" height="60" border="4" alt="网页教学网欢迎您" align="left" class="style1">,这里的CSS的“style1”放在网页源代码的<head>与</head>之间,其代码为:

<style type="text/css">

<!--

.style1 { border-color: #009900 }

-->

</style>

2、给图片加动态说明和替代文字

若想制作当鼠标移到图片上出现一行简短说明文字的效果,不必去使用图层技术(特殊效果的说明除外),设定title参数就行了。例:在上例的图片的代码改成这样:<img src="/images/logo.gif" width="180" height="60" border="4" title="网页教学网-专业的网页教学站点" alt="网页教学网欢迎您" align="left" class="style1">。这样,当鼠标移到图片上,就会显示出说明文字“网页教学网-专业的网页教学站点”。

给图片加上替代文字是一种好习惯,象上例那样设置alt参数,当用户关闭图像显示或页面刚刚下载时,图片还没来不得及显示时,图像的替代文字就会显示出来,这样用户就能知道对应的图像内容。

3、图像与文字混排

图文混排主要是设置align参数。在这里要注意:

1) top、middle、center、bottom所产生的效果只是一行文字,在多行文本与图象对齐时要用left和right参数值。

2)<img>中的对齐参数align所产生的效果是指图片与周围文字的位置关系,而图片在页面中的位置对齐是在图片所在的页面元素中设置的。如下面这段代码:

<p align="left"><img src="/images/logo.gif" width="180" height="60" border="4" alt="网页教学网欢迎您" align="top" class="style1">图文混排示例</p>

在上面这段代码中,标记<p>中的align="left"表示图片的位置在窗口的左端;而<img>中的align="top"则表示图片旁边的文字与图片的顶端对齐。

3)为了避免图片与旁边文字挨得太近不便阅读,可以通过设置hspace参数来控制图片与文字间的距离,一般设置hspace="10"(表示图片的左右有10个像素的空白)就能达到较好的效果。

4、动态替换图像

鼠标不在图片上

鼠标移到图片上

当用户的鼠标放在图片上时,图片会自动更换,鼠标离开之后,图片又会恢复原来的样了。象上边所示的这种效果,当把鼠标移到上面时,看到的效果似乎是那个白色窗口向上下展开了,实际上是换了一张图片。鼠标移开,又恢复了原样。制作这样的效果,先要给欲替换的图片设定名字,本例中是name="webjx";然后设定onmuseover和onmouseout 参数。本例<img>标记的完整代码如下:

<img src="http://www.webjx.com/images/logo.gif" width="180" height="60" align="left" name="webjx" onmouseover="webjx.src='http://www.webjx.com/img/link.gif'" onmouseout="webjx.src='http://www.webjx.com/images/logo.gif'" alt="网页教学网地址http://www.webjx.com" vspace="10" hspace="10">

采用本例来制作动态按钮将会达到很吸引人的效果。

5、在网页加入影像片断

例:在video目录下有一介绍“网页制作”的影像片断文件“web.avi”,现要在网页中播放。那么源代码是这样的:

<img dynsrc="video/web.avi" start="mouseover" width="380" height="288" controls loop="1" alt="网页制作视频教程">

上面这段代码的效果是,当鼠标移开影像片断上时即开始训动媒体播放器播放影像一次,并且还设定了显示播放器控制面板,以便对播放过程进行控制。

从上面的代码可以看出,在网页中加入影像片断与加普通图像基本相同,如它们都要指定来源、设定大小和替代文字等。但在这里请注意:加入影像片断时要使用“dynsrc”参数,且不能再在同个<img>标记中使用“src”参数,否则将不能播放影像片断,只能显示替代文字了。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有