在網頁制作中,通過一些隱藏對象,如隱藏IFrame、隱藏表單對象、隱藏圖片的應用,通常能起到加速網頁下載速度或增強網頁交互功能的作用。下面筆者就通過幾個實例來說明應用的方法。
一、使用隱藏圖片實現圖片交換效果
一般實現圖片交換效果(如鼠標移入和移出或點擊交換),都是通過在JavaScript代碼中改變圖片的來源屬性SRC實現。其弊端是每次切換圖片時都必須重新下載新圖片,在圖片較大或網速較慢的情形下無疑會出現等待下載的問題。有些網頁編輯器如Dreamweaver中提供了預下載(Preload)的函數,但實際上據筆者在IE 6.0中測試發現并不能解決此問題。
現在筆者提供一種方法,在下載網頁時將要交換的圖片全部下載,并將其位置設為相同(利用CSS屬性)。在交換時改變圖片CSS屬性中的可見性屬性(Visibility)為隱藏(Hidden)或可見(Visible),即可避免重新下載新圖片。下面是一個鼠標移出移入交換Pic1.jpg和Pic2.jpg的實例。
<script language="javascript">
function change_img(from_img,to_img){ //將from_img替換為to_img
document.images[from_img].style.visibility = "hidden";
document.images[to_img].style.visibility = "visible";
}
</script>
<span style="position:absolute; left:0px; top:0px;" onMouseOver="change_img('img1','img2')" onMouseOut="change_img('img2','img1')" >
<img name="img1" src="pic1.jpg" style="position:absolute; left:0px; top:0px;">
<img name="img2" src="pic2.jpg" style="position:absolute; left:0px; top:0px;visibility:hidden;"> <!--預先將img2設為隱藏!-->
</span>
注意此例中塊元素Span的引進是必要之步(也可用Div等替換),如果是點擊交換圖片則無需使用。另外,如果你不想讓圖片的位置固定,也可臨時在JavaScript代碼中讓img2的位置等于img1的位置。(西部E網www.wsalc.com )推薦使用這種方法。
二、利用隱藏表單對象增強交互性
留言板的留言區,這個留言板允許訪問者選擇表情符。我們假設設計者已在網頁中實現了將訪問者所選表情符的代號存入了全局變量Faceid中,那如何能在提交表單時將這個變量傳遞給服務器呢?其實只需用一個隱藏類型(Hidden)的表單對象即可解決問題。
在表單部分這樣書寫:
<form name="writer" action="server.php" method="post">
<!--此處省略了其它表單對象!-->
<input type="button" value="寫好了" onclick="verify()">
<!--在提交前使用verify函數進行驗證。!-->
<input name="faceid_save" type="hidden">
</form>
在驗證表單函數中這樣書寫:
function verify() {
//此處省略了其他驗證部分,即運行至此已通過其他驗證
document.writer.faceid_save.value = faceid;
document.writer.submit();
}
三、隱藏IFrame在服務器交互頁面中的使用
在設計PHP、ASP等面向服務器的網頁時,經常會涉及到服務器端數據庫或文件的操作,比如說記錄用戶IP、網站訪問量、頁面鏈接訪問量等。如果將這些操作的代碼和要發給用戶端的內容放在一個網頁文件中,就會影響用戶下載的速度,因為服務器首先要處理完這些操作代碼才會將生成的頁面發給訪問者。特別是現在有一些虛擬機服務器,處理數據庫特別慢,在這種情況下,除了避免數據庫操作(如盡量使用文本文件記錄信息)之外,就需另想辦法。以下操作以PHP為例。
下例中將針對服務器的操作代碼分離出來,放入一個獨立的PHP文件,如Server.php。在主頁面中加入一個隱藏的內嵌頁面(inner frame,IFrame,如圖2:通常沒有隱藏的IFrame效果),并將Server.php放入內嵌頁面打開,而其他內容仍放在主頁面,由于內嵌頁面的下載并不會影響主頁面的下載,這就提高了速度。在主頁面中的具體代碼只需如下書寫:
<IFRAME NAME="pagename" SRC="server.php" WIDTH="0" HEIGHT="0"></IFRAME>
<!--這里將iframe的高和寬設為0實現隱藏。!-->
同樣,如果需要記錄某個鏈接的點擊量也可同樣設計:
<IFRAME NAME="clicksave" SRC="" WIDTH="0" HEIGHT="0"></IFRAME>
<a href="你要鏈接的內容" target="_blank" OnClick="javascript:window.clicksave.location='server.php'">鏈接顯示內容</a>
<!--在打開鏈接的同時將server.php在clicksave內嵌頁面中打開!-->
總結:以上提供了3種簡單使用隱藏對象的方法,實際上利用隱藏對象還能實現更多奇特的效果,比如將網頁設計成Windows桌面形式,多窗口的形式就可使用隱藏IFrame實現。因此這里只能算是拋磚引玉了,大家可根據需要進行靈活應用。
西部E網www.wsalc.com補充:隱藏對象還有一個功能就是美化頁面。如果你的網站上有一些統計流量的代碼,但是你卻不希望顯示出來,那么你可以將他們放在一個 div 中,然后用visibility:hidden的方法將div隱藏,這樣既能統計信息又能美化頁面,怎么樣?(西部E網www.wsalc.com )
西部E網 http://www.wsalc.com 提示:直接使用文中代碼請先將全角“<>”替換成半角“<>”。