- 作者： phoenixlhan

在网页制作中，通过一些隐藏对象，如隐藏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.weste.net ）推荐使用这种方法。
　
　　二、利用隐藏表单对象增强交互性

　　留言板的留言区，这个留言板允许访问者选择表情符。我们假设设计者已在网页中实现了将访问者所选表情符的代号存入了全局变量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.weste.net补充：隐藏对象还有一个功能就是美化页面。如果你的网站上有一些统计流量的代码，但是你却不希望显示出来，那么你可以将他们放在一个 div 中，然后用visibility:hidden的方法将div隐藏，这样既能统计信息又能美化页面，怎么样？（西部E网www.weste.net ）

　　西部E网 http://www.weste.net 提示：直接使用文中代码请先将全角“＜＞”替换成半角“<>”。

发表于 @ 2005年06月26日 23:28:00|评论(loading...)|编辑