电子与电脑

用DHTML在Web页面实现多媒体显示效果
　　李启拴蔡谊白雷邓为新
　　DHTML的全称为动态HTML (Dynamic HTML)，它是IE4.0上增加的一个新特性，通过它可以动态地改变Web页面上各元素的位置、内容及显示风格，尤其是可以像在Photoshop中一样对图像动态地实施滤镜(Filter)及转换(Transition)，从而使Web页面表现出多媒体风格的显示效果。它具有如下几个特点：
　　高效所有这些DHTML代码都是在浏览器上解释执行，避免了频繁地与服务器打交道，减少了网络传输量。
　　交互性能强对用户的许多操作在本地就可做实时处理，从而得到更快的用户响应。
　　界面更丰富用代码可控制Web页面上的所有元素，使页面制作者可以随心所欲地表达自己的构思。
　　为了更好地使用DHTML，你需要了解以下几项重要内容。
　　1、DHTML的目标模型：就是目标的树形结构。如同在Windows文件系统中的路径一样，参考一个文件时要指定其路径，同样，在DHTML中参照页面上的某个元素时，需要指定其层次路径，一般表示为DOCUMENT.ALL.元素ID.属性。
　　2、元素ID：即为元素的标识，要给每一个元素指定一个ID属性，这样在脚本中才能参考它。比如我们在一个页面中添加了一段文本，并为其设置ID标识。
　　
　　<P ID="SAMPLE">
　　SAMPLE TEXT</P>
　　在脚本中可参考为：
　　document.all.sample
　　然后将它作为一个对象来对待，如改变其文本、位置及颜色等。例如：
　　document.all.sample.innerText="other text"
　　3、Vbscript或Jscript：这是DHTML中内部的操作语言，因此要了解其语法、函数等。
　　4、DHTML是基于HTML和CSS (Cascading Style Sheet)的：HTML就是我们一般所说的超文本标记语言，CSS指的是页面上的每个元素都具有一个Style属性，所有DHTML功能都是通过动态地修改Style属性来实现的，格式如下：
　　Style=”属性名1：属性值1; 属性名2:属性值2;......;”
　　上述格式中属性名主要有：position、top、left、width、height、background-color、color、filter、font-size等。其中较复杂的是Filter，它包括十多种滤镜和二十多种转换。
　　5、了解DHTML中事件的触发机制：onclick、onload、onfilterchange等。
　　下面是一个实例，来具体展示DHTML的效果及实现方法，主要有完整的DHTML程序清单如下：
　　DHTML清单如下：
　　<html>
　　<head>
　　<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
　　<title>Home Page</title>
　　</head>
　　<script language="JavaScript"></script>
　　<body onload="setlight()" bgcolor="#00FFFF">
　　<h1 align="center"><font face="隶书">DHTML多媒体显示效果</font></h1>
　　<table border="1" width="100%" height="230" cellspacing="0" cellpadding="0">
　　 <tr>
　　 <td height="1" valign="top"><img id="ttt" style="cursor:hand;filter:light();"
　　 src="images/szpic2.gif" alt="szpic2.gif (8730 bytes)" onmousemove="move()" WIDTH="122"
　　 HEIGHT="95"></td>
　　 <td height="1" align="center"><div id="box"
　　 style="filter:revealTrans(duration=0.5 transition=0);cursor:hand;color:red;width:50;height:50; font-size:80px;"
　　 width="2" height="2" onclick="again()" onfilterchange="againRepeat()"><p>8</p>
　　 </div><p>　</td>
　　 </tr>
　　 <tr>
　　 <td width="50%" height="40"><font face="隶书">上图是深圳的帝王大厦，移动鼠标可看到全貌！</font><p><font
　　 face="隶书">下图是大海和夕阳的渐变图，请用鼠标单击！</font></td>
　　 <td width="50%" height="40"><font face="隶书">上图是动态计数器！</font><p><font
　　 face="隶书">下图是图橡转换，请用鼠标单击！</font></td>
　　 </tr>
　　 <tr>
　　 <td width="50%" height="1" valign="top"><img id="beach"
　　 style="filter:blendTrans(duration=4); cursor: hand;" onclick="blends()"
　　 onfilterchange="blendsRepeat()" src="images/a1.jpg" alt="a1.jpg (126774 bytes)"
　　 WIDTH="256" HEIGHT="165"></td>
　　 <td width="50%" height="1" valign="top"><img src="images/2000.gif" id="reveal"
　　 style="filter:revealTrans(duration=1 transition=8);cursor: hand;" onclick="begin()"
　　 onfilterchange="beginRepeat()" width="320" height="240" alt="2000.gif (2514 bytes)"></td>
　　 </tr>
　　</table>
　　<p><img src="images/a31.gif" alt="a31.gif (190 bytes)" style="display:none" WIDTH="32"
　　HEIGHT="32"></p>
　　<p><img visibile="none" src="images/a3.jpg" alt="a3.jpg (3934 bytes)"
　　style="display:none;" WIDTH="256" HEIGHT="165"></p>
　　</body>
　　</html>
　　在一个图像上显示一束光，随着鼠标在图像上的移动，该束光也跟着移动。从一幅图像逐渐淡化成另一幅图像。
　　实现后的效果如图1所示。
　　（图注DHTML）图1
　　上述实例的DHTML代码虽然看起来很繁琐，但实现起来还是很方便的，因为在Frontpage中可生成大部分的代码，你只需要在生成代码的基础上添加适当的函数及属性即可，如果希望在自已的机器上实验上述功能，可以按如下步骤操作：
　　1、找5个大小适中的图片分别命名为：szpic2.gif、a1.jpg、2000.gif、a31.gif、a3.jpg，并通过Import保存到images目录中；
　　2、在Frontpage中建一新的页面，进入编辑画面；
　　2、切换到HTML显示格式，删除所有的HTML代码；
　　3、将本例代码拷贝到这一页面；
　　4、将代码中所有的http://lqs/myweb替换成你的页面地址，保存后，通过Preview或切换到IE，均可看到本文所介绍的效果。
　　
　　（作者地址：广东省深圳市蛇口工业区海湾路八号广东浮法玻璃有限公司信息部，518067，收稿日期：1999.2.26）