动态链接、鼠标击活链接

动态链接、鼠标击活链接
时间:2009-10-09 20:55 点 击:112次 字体:[大 中 小 ]


尽管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)，方法是:首先在文档中插 入普通文本连链接，如:
Contact Us
第二步改变当鼠标移到文本链接 上时该链接所显示的颜色。其DHTML脚本程序如下:
function rollon( ){
 if (window.event.
 src/DownloadFiles\a\2005-05-08\/DownloadFiles\a\2005-05-08\Element.tagName  = = "A"){
 window.event.srcElement.
 style.color = "red";}
 }
function rolloff( ){
 if (window.event.
 src/DownloadFiles\a\2005-05-08\/DownloadFiles\a\2005-05-08\Element.tagName  = = "A"){
 window.event.srcElement.
 style.color = "";}
 }
document.onmouseover = rollon;
document.onmouseout = rolloff; 
将这段代码放在一对标记 中间，插入到Web页面的中，立刻就能实现在每一个文本链接上的鼠标击活链接(mouseover)效果了。下面我们详细一下这是怎样实现的。
前面所写的脚本程序定义了两个 关键性的#函数#:rollon(当鼠标移到链接上时激活)和rolloff(当鼠标移离链接时激活)。 每个函数都从一个简单的'if'语句开始，它的意思是:Web文档每次调用onmouseover事件 时，rollon函数都会浏览器来判断激活该事件的对象是否是一个Anchor标记  (window.event.src/DownloadFiles\a\2005-05-08\/DownloadFiles\a\2005-05-08\Element.tagName = = "A")。如果是，则该脚本程序将把特别的风格(在本 例中是红颜色)用到链接上。类似地，在出现onmouseout事件时，rolloff函数将使该风格 恢复为其缺省的颜色 (color="")。
本篇文章共2页，此页为首页下一页
.
  .
.>
  .






本 文 地 址 :挑错  推荐

标签:动态链接鼠标一个mouseover

来源: 网络      作者:佚名

------分隔线----------------------------