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= "chinahtml"；然后设定onmuseover和onmouseout 参数。本例<img>标记的完整代码如下：
<img src="/upimg/allimg/071115/0734291.gif" width="180" height="60" align="left" name="chinahtml" onmouseover="chinahtml.src='http://www.chinahtml.com/img/link.gif'" onmouseout="chinahtml.src='/upimg/allimg/071115/0734291.gif'" alt="站长资讯地址http://www.chinahtml.com" vspace="10" hspace="10">
采用本例来制作动态按钮将会达到很吸引人的效果。
5、在网页加入影像片断
例：在video目录下有一介绍“网页制作”的影像片断文件“web.avi”，现要在网页中播放。那么源代码是这样的：
<img dynsrc="video/web.avi" start="mouseover" width="380" height="288" controls loop="1" alt="网页制作视频教程">内容来自中国站长资讯网(www.chinahtml.com)
评论加载中…
 |