網(wǎng)頁制作隱藏對(duì)象巧利用

niekui

　在網(wǎng)頁制作中，通過一些隱藏對(duì)象，如隱藏IFrame、隱藏表單對(duì)象、隱藏圖片的應(yīng)用，通常能起到加速網(wǎng)頁下載速度或增強(qiáng)網(wǎng)頁交互功能的作用。下面筆者就通過幾個(gè)實(shí)例來說明應(yīng)用的方法。
　
　　一、使用隱藏圖片實(shí)現(xiàn)圖片交換效果

　　一般實(shí)現(xiàn)圖片交換效果（如鼠標(biāo)移入和移出或點(diǎn)擊交換），都是通過在javascript代碼中改變圖片的來源屬性SRC實(shí)現(xiàn)。其弊端是每次切換圖片時(shí)都必須重新下載新圖片，在圖片較大或網(wǎng)速較慢的情形下無疑會(huì)出現(xiàn)等待下載的問題。有些網(wǎng)頁編輯器如Dreamweaver中提供了預(yù)下載（Preload）的函數(shù)，但實(shí)際上據(jù)筆者在IE 6.0中測(cè)試發(fā)現(xiàn)并不能解決此問題。

　　現(xiàn)在筆者提供一種方法，在下載網(wǎng)頁時(shí)將要交換的圖片全部下載，并將其位置設(shè)為相同（利用CSS屬性）。在交換時(shí)改變圖片CSS屬性中的可見性屬性（Visibility）為隱藏（Hidden）或可見（Visible），即可避免重新下載新圖片。下面是一個(gè)鼠標(biāo)移出移入交換Pic1.jpg和Pic2.jpg的實(shí)例。
　
　
　
　
　
　  
　
　
　　注意此例中塊元素Span的引進(jìn)是必要之步（也可用Div等替換），如果是點(diǎn)擊交換圖片則無需使用。另外，如果你不想讓圖片的位置固定，也可臨時(shí)在javascript代碼中讓img2的位置等于img1的位置�！�
　　二、利用隱藏表單對(duì)象增強(qiáng)交互性

　　留言板的留言區(qū)，這個(gè)留言板允許訪問者選擇表情符。我們假設(shè)設(shè)計(jì)者已在網(wǎng)頁中實(shí)現(xiàn)了將訪問者所選表情符的代號(hào)存入了全局變量Faceid中，那如何能在提交表單時(shí)將這個(gè)變量傳遞給服務(wù)器呢？其實(shí)只需用一個(gè)隱藏類型（Hidden）的表單對(duì)象即可解決問題。

　　在表單部分這樣書寫：

　

　
　
　
　
　

　　在驗(yàn)證表單函數(shù)中這樣書寫：

　function verify() {
　//此處省略了其他驗(yàn)證部分，即運(yùn)行至此已通過其他驗(yàn)證
　 document.writer.faceid_save.value = faceid;
　 document.writer.submit();
　}
　
　　三、隱藏IFrame在服務(wù)器交互頁面中的使用

　　在設(shè)計(jì)PHP、ASP等面向服務(wù)器的網(wǎng)頁時(shí)，經(jīng)常會(huì)涉及到服務(wù)器端數(shù)據(jù)庫或文件的操作，比如說記錄用戶IP、網(wǎng)站訪問量、頁面鏈接訪問量等。如果將這些操作的代碼和要發(fā)給用戶端的內(nèi)容放在一個(gè)網(wǎng)頁文件中，就會(huì)影響用戶下載的速度，因?yàn)榉��?wù)器首先要處理完這些操作代碼才會(huì)將生成的頁面發(fā)給訪問者。特別是現(xiàn)在有一些虛擬機(jī)服務(wù)器，處理數(shù)據(jù)庫特別慢，在這種情況下，除了避免數(shù)據(jù)庫操作（如盡量使用文本文件記錄信息）之外，就需另想辦法。以下操作以PHP為例。

　　下例中將針對(duì)服務(wù)器的操作代碼分離出來，放入一個(gè)獨(dú)立的PHP文件，如Server.php。在主頁面中加入一個(gè)隱藏的內(nèi)嵌頁面（inner frame，IFrame，如圖2：通常沒有隱藏的IFrame效果），并將Server.php放入內(nèi)嵌頁面打開，而其他內(nèi)容仍放在主頁面，由于內(nèi)嵌頁面的下載并不會(huì)影響主頁面的下載，這就提高了速度。在主頁面中的具體代碼只需如下書寫：
　
　
　
　
　　同樣，如果需要記錄某個(gè)鏈接的點(diǎn)擊量也可同樣設(shè)計(jì)：
　
　
　鏈接顯示內(nèi)容
　
　
　　總結(jié)：以上提供了3種簡(jiǎn)單使用隱藏對(duì)象的方法，實(shí)際上利用隱藏對(duì)象還能實(shí)現(xiàn)更多奇特的效果，比如將網(wǎng)頁設(shè)計(jì)成Windows桌面形式，多窗口的形式就可使用隱藏IFrame實(shí)現(xiàn)。因此這里只能算是拋磚引玉了，大家可根據(jù)需要進(jìn)行靈活應(yīng)用。

　　補(bǔ)充：隱藏對(duì)象還有一個(gè)功能就是美化頁面。如果你的網(wǎng)站上有一些統(tǒng)計(jì)流量的代碼，但是你卻不希望顯示出來，那么你可以將他們放在一個(gè) div 中，然后用visibility:hidden的方法將div隱藏，這樣既能統(tǒng)計(jì)信息又能美化頁面，怎么樣？