|
尽管Dynamic HTML看似热闹，实际上，整个Web几乎依然是静态的。当然，一段时间以来，一些比较前卫的网点已经有了一些交互式的内容，但它们中的大部分还是在用插件或者是用针对不同版本的浏览器编写多个页面的方式实现的。对于大多数网页制作者来说，即使他们很想为一个页面编写多个版本，他们也很难有这个时间，再加上能达到交互式效果的网页通常都需要很高的带宽，这样做出来的网页是作者和浏览者都无法接受的。然而，并不是非得这样不可。在这里，你可以学习到一个既快捷又简单的方法，它会给网页在低带宽情况下增加DHTML效果，这就是鼠标击活链接(mouseovers)的方法，这个方法既不用装入任何图片也不用编写多个页面。
更好的鼠标捕捉信息方法
鼠标击活链接(mouseover)是Web应用最广泛和最有效的动态方法之一，一个很好的原因在于，它能使浏览者获得清晰、直接的反馈。可以这样设想：将鼠标移到一个超文本链接上，该链接将会变为高亮度显示、改变颜色，或者产生其他的变化以表示“我是一个链接！”。
这并不是说所创建的所有鼠标击活链接(mouseover)都是相同的。它们是不同的。最糟糕的情况是鼠标击活链接(mouseover)是用Java语言或者专用格式实现的，如Macromedia的Shockwave格式，它需要浏览者装入插件才能看到效果。最好的情况是鼠标击活链接(mouseover)是用各浏览器都支持的javascript编写的。但即使是用JavaScript来实现，也需要浏览器装入两幅图，分别用于高亮度和正常状态的显示，这对于带宽的利用是一种浪费。
现在来看看DHTML，用它创建的鼠标击活链接(mouseover)无需装入任何图像。唯一需要注意的是，DHTML代码需要通过浏览器来打开Web页面对象，如链接和风格，以便由Document Object Model (DOM)来进行描述。换句话说，该代码目前还只能在Internet Explorer 4.0中使用。不过，Netscape的第五代浏览器（预计今年年底出台）将完全支持DOM。同时，不必担心鼠标击活链接(mouseover)在不兼容浏览器中的使用，不支持页面中的DHTML代码的浏览器会简单地忽略它们。（细节请看后面的“在你的网点上让DOM发挥作用”一节）
代码
普通的Web页面分为两个主要的区域：一个是内容区，一个是导航区。鼠标击活链接(mouseover)通常都出现在导航区。典型的情况是用高亮度按钮指示浏览者进入该网点的不同区域，如网点图或反馈页面。我们现在不用按钮，而要将普通文本链接变成交互式的鼠标击活链接(mouseover)，方法是：首先在文档中插入普通文本连链接，如：
< a href="contact_us.html">
Contact Us< /a>
第二步改变当鼠标移到文本链接上时该链接所显示的颜色。其DHTML脚本程序如下：
function rollon( ){
if (window.event.
srcElement.tagName = = "A"){
window.event.srcElement.
style.color = "red";}
}
function rolloff( ){
if (window.event.
srcElement.tagName = = "A"){
windo [1] [2] [3] 下一页 |
