动态链接、鼠标击活链接 -pc6资讯

您的位置：首页 → 精文荟萃 → 软件资讯 → 动态链接、鼠标击活链接

动态链接、鼠标击活链接 时间：2004/10/8 13:17:00来源：本站整理作者：蓝点我要评论(1)

　　尽管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">

　　第二步改变当鼠标移到文本链接上时该链接所显示的颜色。其DHTML脚本程序如下：

　　function rollon( ){

　　 if (window.event.

　　 srcElement.tagName = = "A"){

　　 window.event.srcElement.

　　 style.color = "red";}

　　 }

　　function rolloff( ){

　　 if (window.event.

　　 srcElement.tagName = = "A"){

　　 window.event.srcElement.

　　 style.color = "";}

　　 }

　　document.onmouseover = rollon;

　　document.onmouseout = rolloff; 　　

　　将这段代码放在一对< script>标记中间，插入到Web页面的< head>中，立刻就能实现在每一个文本链接上的鼠标击活链接(mouseover)效果了。下面我们详细分析一下这是怎样实现的。

　　前面所写的脚本程序定义了两个关键性的函数：rollon（当鼠标移到链接上时激活）和rolloff（当鼠标移离链接时激活）。每个函数都从一个简单的'if'语句开始，它的意思是：Web文档每次调用onmouseover事件时，rollon函数都会通知浏览器来判断激活该事件的对象是否是一个Anchor标记 (window.event.srcElement.tagName = = "A")。如果是，则该脚本程序将把特别的风格（在本例中是红颜色）用到链接上。类似地，在出现onmouseout事件时，rolloff函数将使该风格恢复为其缺省的颜色 (color="")。

　　这段脚本程序的最后两行是通知浏览器在onmouseover事件发生时执行rollon函数并在onmouseout事件发生时关闭鼠标击活链接(mouseover)功能。

事半功倍

　　Internet Explorer 4.0允许你用DHTML来控制文档中的每一个对象，自然就可以实现除改变Anchor标记的颜色之外更多的功能。实际上，你可以将任何Cascading Style Sheets（CSS，是W3C的标准格式规范）中的元素应用到任何类型的对象或资源组件上。例如，除了使一个链接显示为红色之外，还可以给它加上或去掉下划线。

　　要去掉下划线，只需简单地将如下风格属性插入到该页面上的所有Anchor标记中即可：

　　style = "text-decoration: none"

　　这个语句将去掉链接的下划线，使它显示为正常或缺省状态。（在缺省情况下，Internet Explorer 4.0和Navigator 4.0将所有文本链接都加下划线，上述语句将逐个地改变这些链接的缺省状态。）

　　然后，在rollon函数下边加上如下语句：

　　window.event.srcElement.style.

　　textDecoration = "underline";

　　现在，你所定义的鼠标击活链接(mouseover)事件的资源将变成红色并且有下划线风格。要注意在rolloff函数中加上如下语句可以再把下划线去掉：

　　window.event.srcElement.style.

　　textDecoration = "none";

　　以上这些很快即可实现的修改功能显示了简单的DHTML脚本程序的威力，它无需装入任何图像，而是用一段高度灵活的可移植代码来产生引人注目的视觉效果，我可以说，你用它能访问任意文档，即使是在老版本的浏览器中也不会产生错误。想要获得此代码并自己加以掌握和应用的话，请访问我们的网点：www.windowspro.com。

　　-----------------

　　Edward Grossman是www.windowspro.com网点的制作人，哲学博士，Web出现以前从事哲学领域的研究。他的E-mail：Edward_Grossman@zd.com

　　只需在文档的①head中加入约15行代码，就可以将任何Web网页上的②普通文本链接变成③交互式的鼠标击活链接(mouseover)。

　　------------

　　在你的网点上让DOM发挥作用

　　有了Dynamic HTML (DHTML)，面向对象的程序设计已不再是只有编程专家才能作的事情，它正成为所有有经验的网页制作者也能涉足的领域。这在很大程度上要归功于Document Object Model，即DOM。这个W3C规范将文档中的每个成分都视为对象，不论它是一个、一种风格还是一个链接。脚本程序可以根据用户的输入、浏览器的类型或许多其他变量对这些对象进行修改，包括改变的大小，改变风格，或者更新链接。

　　DOM可以打开整个文档，让Web制作者创建高度可定制的交互式页面，而不给用户造成大量下载的开销。这不仅可以实现低带宽的鼠标击活链接(mouseover)，还可以实现可折叠的网页浏览菜单及可移动的页面组件（如图像、文本块等）。

　　关于DOM的更多信息，请访问网点：www.w3.org/dom、www.microsoft.com/workshop/author/dhtml/和developer.netscape.com/docs/manuals/communicator/dynhtml/。

　　有关DHTML的应用实例，请访问：www.windowspro.com和www.projectcool.com（试试将Saturn到处拖动），并请浏览“View source”。

　　在IE 4.0中，可以用Dynamic HTML实现对几十种对象的操作。在网点www.microsoft.com上有详细内容的列表。