要想让您的站点更加吸引人,除了内容实用以外还需要加入一些动态的内容,让浏览你的站点的人感到趣味横生,对象的显示与隐藏就是常用的一个技巧。如果你学好了以前的DHTML课程的话,实现起来就很容易了。
假如我们有一个如下的 DIV tag:
<DIV ID="blockDiv" STYLE="position:absolute; left:200; top:100">
<IMG SRC="xxx.jpg" WIDTH=xx HEIGHT=xx BORDER=0>
</DIV>
DIV 的名字是任意起的.可以通过 JavaScript 脚本来控制它. 下面就是具体方法:
对 Netscape 来说, 得到 CSS-P 性质 (property) 的方法如下:
document.blockDiv.propertyName
而对于 Internet Explore 来说, 要用
blockDiv.style.propertyName
propertyName 可以是任何一个 DIV 可以用的 CSS-P 的性质, 比如 left, top, visibility, zindex, width。
以下就是整个脚本,试试吧:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function init() {
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
}
function showObject(obj) {
if (ns4) obj.visibility = "show"
else if (ie4) obj.visibility = "visible"
}
function hideObject(obj) {
if (ns4) obj.visibility = "hide"
else if (ie4) obj.visibility = "hidden"
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<center>
<A HREF="javascript:showObject(block)">显示 show</A> |
<A HREF="javascript:hideObject(block)">隐蔽 hide</A>
</center>
<DIV ID="blockDiv"
STYLE="position:absolute; left:150; top:150; width:200; visibility:visible;">
<IMG SRC="baby.gif" BORDER=0 width=100 height=136>
</DIV>
</BODY>
</HTML>
发挥你的想象力吧,利用以上脚本结合OnMouse鼠标感应特性,你一定可以做出非常精彩的页面特效。
|