更新時間：2014-12-05盡管Dynamic HTML看似熱鬧，實際上，整個Web幾乎依然是靜態(tài)的。當然，一段時間以來，一些比較前衛(wèi)的網(wǎng)點已經(jīng)有了一些交互式的內(nèi)容，但它們中的大部分還是在用插件或者是用針對不同版本的瀏覽器編寫多個頁面的方式實現(xiàn)的。對于大多數(shù)網(wǎng)頁制作者來說，即使他們很想為一個頁面編寫多個版本，他們也很難有這個時間，再加上能達到交互式效果的網(wǎng)頁通常都需要很高的帶寬，這樣做出來的網(wǎng)頁是作者和瀏覽者都無法接受的。然而，并不是非得這樣不可。在這里，你可以學習到一個既快捷又簡單的方法，它會給網(wǎng)頁在低帶寬情況下增加DHTML效果，這就是鼠標擊活鏈接(mouseovers)的方法，這個方法既不用裝入任何圖片也不用編寫多個頁面。
更好的鼠標捕捉信息方法
鼠標擊活鏈接(mouseover)是Web應用最廣泛和最有效的動態(tài)方法之一，一個很好的原因在于，它能使瀏覽者獲得清晰、直接的反饋�？梢赃@樣設想：將鼠標移到一個超文本鏈接上，該鏈接將會變?yōu)楦吡炼蕊@示、改變顏色，或者產(chǎn)生其他的變化以表示“我是一個鏈接！”。
這并不是說所創(chuàng)建的所有鼠標擊活鏈接(mouseover)都是相同的。它們是不同的。最糟糕的情況是鼠標擊活鏈接(mouseover)是用Java語言或者專用格式實現(xiàn)的，如Macromedia的Shockwave格式，它需要瀏覽者裝入插件才能看到效果。最好的情況是鼠標擊活鏈接(mouseover)是用各瀏覽器都支持的JavaScript編寫的。但即使是用JavaScript來實現(xiàn)，也需要瀏覽器裝入兩幅圖，分別用于高亮度和正常狀態(tài)的顯示，這對于帶寬的利用是一種浪費。
現(xiàn)在來看看DHTML，用它創(chuàng)建的鼠標擊活鏈接(mouseover)無需裝入任何圖像。唯一需要注意的是，DHTML代碼需要通過瀏覽器來打開Web頁面對象，如鏈接和風格，以便由Document Object Model (DOM)來進行描述。換句話說，該代碼目前還只能在Internet Explorer 4.0中使用。不過，Netscape的第五代瀏覽器（預計今年年底出臺）將完全支持DOM。同時，不必擔心鼠標擊活鏈接(mouseover)在不兼容瀏覽器中的使用，不支持頁面中的DHTML代碼的瀏覽器會簡單地忽略它們。（細節(jié)請看后面的“在你的網(wǎng)點上讓DOM發(fā)揮作用”一節(jié)）
代碼
普通的Web頁面分為兩個主要的區(qū)域：一個是內(nèi)容區(qū)，一個是導航區(qū)。鼠標擊活鏈接(mouseover)通常都出現(xiàn)在導航區(qū)。典型的情況是用高亮度按鈕指示瀏覽者進入該網(wǎng)點的不同區(qū)域，如網(wǎng)點圖或反饋頁面。我們現(xiàn)在不用按鈕，而要將普通文本鏈接變成交互式的鼠標擊活鏈接(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"){
window.event.srcElement.
style.color = "";}
}
document.onmouseover = rollon;
document.onmouseout = rolloff;
將這段代碼放在一對< script>標記中間，插入到Web頁面的< head>中，立刻就能實現(xiàn)在每一個文本鏈接上的鼠標擊活鏈接(mouseover)效果了。下面我們詳細分析一下這是怎樣實現(xiàn)的。
前面所寫的腳本程序定義了兩個關鍵性的函數(shù)：rollon（當鼠標移到鏈接上時激活）和rolloff（當鼠標移離鏈接時激活）。每個函數(shù)都從一個簡單的'if'語句開始，它的意思是：Web文檔每次調(diào)用onmouseover事件時，rollon函數(shù)都會通知瀏覽器來判斷激活該事件的對象是否是一個Anchor標記 (window.event.srcElement.tagName = = "A")。如果是，則該腳本程序?qū)烟貏e的風格（在本例中是紅顏色）用到鏈接上。類似地，在出現(xiàn)onmouseout事件時，rolloff函數(shù)將使該風格恢復為其缺省的顏色 (color="")。
這段腳本程序的最后兩行是通知瀏覽器在onmouseover事件發(fā)生時執(zhí)行rollon函數(shù)并在onmouseout事件發(fā)生時關閉鼠標擊活鏈接(mouseover)功能。
事半功倍
Internet Explorer 4.0允許你用DHTML來控制文檔中的每一個對象，自然就可以實現(xiàn)除改變Anchor標記的顏色之外更多的功能。實際上，你可以將任何Cascading Style Sheets（CSS，是W3C的標準格式規(guī)范）中的元素應用到任何類型的對象或資源組件上。例如，除了使一個鏈接顯示為紅色之外，還可以給它加上或去掉下劃線。
要去掉下劃線，只需簡單地將如下風格屬性插入到該頁面上的所有Anchor標記中即可：
style = "text-decoration: none"
這個語句將去掉鏈接的下劃線，使它顯示為正常或缺省狀態(tài)。（在缺省情況下，Internet Explorer 4.0和Navigator 4.0將所有文本鏈接都加下劃線，上述語句將逐個地改變這些鏈接的缺省狀態(tài)。）
然后，在rollon函數(shù)下邊加上如下語句：
window.event.srcElement.style.
textDecoration = "underline";
現(xiàn)在，你所定義的鼠標擊活鏈接(mouseover)事件的資源將變成紅色并且有下劃線風格。要注意在rolloff函數(shù)中加上如下語句可以再把下劃線去掉：
window.event.srcElement.style.
textDecoration = "none";
以上這些很快即可實現(xiàn)的修改功能顯示了簡單的DHTML腳本程序的威力，它無需裝入任何圖像，而是用一段高度靈活的可移植代碼來產(chǎn)生引人注目的視覺效果，我可以說，你用它能訪問任意文檔，即使是在老版本的瀏覽器中也不會產(chǎn)生錯誤。
