HTML进阶应用技巧（四）用好基本图像标记img
时间：2007-02-17 来源：PHP爱好者
网页中最引人入胜的莫过于那丰富多彩的图像了。成功的站点中不能没有绚丽的图像，否则便使测览者觉得索然无味。下面介绍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”参数，否则将不能播放影像片断，只能显示替代文字了。
php爱好者站 http://www.ｐｈｐfans.net 网页特效|网页模板
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”参数，否则将不能播放影像片断，只能显示替代文字了。
php爱好者站 http://www.ｐｈｐfans.net 网页特效|网页模板
相关阅读 更多 +
