2022年动态链接、鼠标击活链接CSSHTML教程.docx

《2022年动态链接、鼠标击活链接CSSHTML教程.docx》由会员分享，可在线阅读，更多相关《2022年动态链接、鼠标击活链接CSSHTML教程.docx（7页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、2022年动态链接、鼠标击活链接CSSHTML教程尽管Dynamic HTML看似喧闹，事实上，整个Web几乎依旧是静态的。当然，一段时间以来，一些比较前卫的网点已经有了一些交互式的内容，但它们中的大部分还是在用插件或者是用针对不同版本的阅读器编写多个页面的方式实现的。对于大多数网页制作者来说，即使他们很想为一个页面编写多个版本，他们也很难有这个时间，再加上能达到交互式效果的网页通常都须要很高的带宽，这样做出来的网页是作者和阅读者都无法接受的。然而，并不是非得这样不行。在这里，你可以学习到一个既快捷又简洁的方法，它会给网页在低带宽状况下增加DHTML效果，这就是鼠标击活链接(mouseover

2、s)的方法，这个方法既不用装入任何图片也不用编写多个页面。更好的鼠标捕获信息方法鼠标击活链接(mouseover)是Web应用最广泛和最有效的动态方法之一，一个很好的缘由在于，它能使阅读者获得清楚、干脆的反馈。可以这样设想：将鼠标移到一个超文本链接上，该链接将会变为高亮度显示、变更颜色，或者产生其他的改变以表示“我是一个链接！”。这并不是说所创建的全部鼠标击活链接(mouseover)都是相同的。它们是不同的。最糟糕的状况是鼠标击活链接(mouseover)是用Java语言或者专用格式实现的，如Macromedia的Shockwave格式，它须要阅读者装入插件才能看到效果。最好的状况是鼠标击活

3、链接(mouseover)是用各阅读器都支持的JavaScript编写的。但即使是用JavaScript来实现，也须要阅读器装入两幅图，分别用于高亮度和正常状态的显示，这对于带宽的利用是一种奢侈。现在来看看DHTML，用它创建的鼠标击活链接(mouseover)无需装入任何图像。唯一须要留意的是，DHTML代码须要通过阅读器来打开Web页面对象，如链接和风格，以便由Document Object Model (DOM)来进行描述。换句话说，该代码目前还只能在Internet Explorer 4.0中运用。不过，Netscape的第五代阅读器（预料今年年底出台）将完全支持DOM。同时，不必担忧

4、鼠标击活链接(mouseover)在不兼容阅读器中的运用，不支持页面中的DHTML代码的阅读器会简洁地忽视它们。（细微环节请看后面的“在你的网点上让DOM发挥作用”一节）代码一般的Web页面分为两个主要的区域：一个是内容区，一个是导航区。鼠标击活链接(mouseover)通常都出现在导航区。典型的状况是用高亮度按钮指示阅读者进入该网点的不同区域，如网点图或反馈页面。我们现在不用按钮，而要将一般文本链接变成交互式的鼠标击活链接(mouseover)，方法是：首先在文档中插入一般文本连链接，如：< a href=contact_us.html>Contact Us< /a>

5、其次步变更当鼠标移到文本链接上时该链接所显示的颜色。其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 = ;} }d

6、ocument.onmouseover = rollon;document.onmouseout = rolloff; 将这段代码放在一对< script>标记中间，插入到Web页面的< head>中，立即就能实现在每一个文本链接上的鼠标击活链接(mouseover)效果了。下面我们具体分析一下这是怎样实现的。前面所写的脚本程序定义了两个关键性的函数：rollon（当鼠标移到链接上时激活）和rolloff（当鼠标移离链接时激活）。每个函数都从一个简洁的if语句起先，它的意思是：Web文档每次调用onmouseover事务时，rollon函数都会通知阅读器来推断激活该事务

7、的对象是否是一个Anchor标记 (window.event.srcElement.tagName = = A)。假如是，则该脚本程序将把特殊的风格（在本例中是红颜色）用到链接上。类似地，在出现onmouseout事务时，rolloff函数将使该风格复原为其缺省的颜色 (color=)。这段脚本程序的最终两行是通知阅读器在onmouseover事务发生时执行rollon函数并在onmouseout事务发生时关闭鼠标击活链接(mouseover)功能。事半功倍Internet Explorer 4.0允许你用DHTML来限制文档中的每一个对象，自然就可以实现除变更Anchor标记的颜色之外更多的

8、功能。事实上，你可以将任何Cascading Style Sheets（CSS，是W3C的标准格式规范）中的元素应用到任何类型的对象或资源组件上。例如，除了使一个链接显示为红色之外，还可以给它加上或去掉下划线。要去掉下划线，只需简洁地将如下风格属性插入到该页面上的全部Anchor标记中即可：style = text-decoration: none这个语句将去掉链接的下划线，使它显示为正常或缺省状态。（在缺省状况下，Internet Explorer 4.0和Navigator 4.0将全部文本链接都加下划线，上述语句将逐个地变更这些链接的缺省状态。）然后，在rollon函数下边加上如下语句：

9、window.event.srcElement.style.textDecoration = underline;现在，你所定义的鼠标击活链接(mouseover)事务的资源将变成红色并且有下划线风格。要留意在rolloff函数中加上如下语句可以再把下划线去掉：window.event.srcElement.style.textDecoration = none;以上这些很快即可实现的修改功能显示了简洁的DHTML脚本程序的威力，它无需装入任何图像，而是用一段高度敏捷的可移植代码来产生引人注目的视觉效果，我可以说，你用它能访问随意文档，即使是在老版本的阅读器中也不会产生错误。想要获得此代码并自

10、己加以驾驭和应用的话，请访问我们的网点：。-Edward Grossman是网点的制作人，哲学博士，Web出现以前从事哲学领域的探讨。他的E-mail：Edward_Grossman只需在文档的head中加入约15行代码，就可以将任何Web网页上的一般文本链接变成交互式的鼠标击活链接(mouseover)。-在你的网点上让DOM发挥作用有了Dynamic HTML (DHTML)，面对对象的程序设计已不再是只有编程专家才能作的事情，它正成为全部有阅历的网页制作者也能涉足的领域。这在很大程度上要归功于Document Object Model，即DOM。这个W3C规范将文档中的每个成分都视为对象

11、，不论它是一个、一种风格还是一个链接。脚本程序可以依据用户的输入、阅读器的类型或很多其他变量对这些对象进行修改，包括变更 的大小，变更风格，或者更新链接。DOM可以打开整个文档，让Web制作者创建高度可定制的交互式页面，而不给用户造成大量下载的开销。这不仅可以实现低带宽的鼠标击活链接(mouseover)，还可以实现可折叠的网页阅读菜单及可移动的页面组件（如图像、文本块等）。关于DOM的更多信息，请访问网点：www.w3.org/dom、有关DHTML的应用实例，请访问：和（试试将Saturn到处拖动），并请阅读“View source”。在IE 4.0中，可以用Dynamic HTML实现对几十种对象的操作。在网点上有具体内容的列表。（出处：