当前位置:首页>>软件教程>>网页制作>>新闻内容
网页制作隐藏对象巧利用
作者:阿水仔 发布时间:2004-4-15 9:23:03 文章来源:《大众软件》

  在网页制作中,通过一些隐藏对象,如隐藏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 提示:直接使用文中代码请先将全角“<>”替换成半角“<>”。


最新更新
·如何去掉ECShop2.7中的Powered by ECSh
·在IE7下生成高质量CSS缩略图
·解决Dreamweaver打开和关闭时出现JavaS
·影响搜索引擎排名的因素2009版
·IE6/IE7/IE8/Firefox/Chrome/Safari的C
·Flash对联广告及关闭按钮制作方法
·Discuz! 7中如果设置帖子中显示图片而不
·5种方法立刻写出更好的CSS代码
·兼容IE和Firefox的按图片宽度缩放的CSS
·兼容Firefox和IE浏览器的“加入收藏”代
相关信息
·隐藏你的网页中的Table表格
画心
愚爱
偏爱
火苗
白狐
画沙
犯错
歌曲
传奇
稻香
小酒窝
狮子座
小情歌
全是爱
棉花糖
海豚音
我相信
甩葱歌
这叫爱
shero
走天涯
琉璃月
Nobody
我爱他
套马杆
爱是你我
最后一次
少女时代
灰色头像
断桥残雪
美了美了
狼的诱惑
我很快乐
星月神话
心痛2009
爱丫爱丫
半城烟沙
旗开得胜
郎的诱惑
爱情买卖
2010等你来
我叫小沈阳
i miss you
姑娘我爱你
我们都一样
其实很寂寞
我爱雨夜花
变心的玫瑰
犀利哥之歌
你是我的眼
你是我的OK绷
贝多芬的悲伤
哥只是个传说
丢了幸福的猪
找个人来爱我
要嫁就嫁灰太狼
如果这就是爱情
我们没有在一起
寂寞在唱什么歌
斯琴高丽的伤心
别在我离开之前离开
不是因为寂寞才想你
爱上你等于爱上了错
在心里从此永远有个你
一个人的寂寞两个人的错