儘管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"){
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： [email protected]
只要在文件的①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上有詳細內容的清單。