|
摘自：简单设计
第一步，把以下代码加入head区。（</head>前）
<SCRIPT
language=JavaScript> //JavaScript程序
<!--
function MM_findObj(n, d)
{ //v3.0
var p,i,x;
if(!d)
d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document;
n=n.substring(0,p);
}
if(!(x=d[n])&&d.all) x=d.all[n];
for
(i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
return
x;
}
function MM_showHideLayers() { //v3.0
var
i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2);
i+=3)
if ((obj=MM_findObj(args[i]))!=null){
v=args[i+2];
if
(obj.style){
obj=obj.style;
v=(v=='show')?'visible':
(v='hide')?'hidden':v;
}
obj.visibility=v;
}
}
//-->
</SCRIPT>
第二步，把以下层的代码加入body区。
<div id=j1 style="HEIGHT: 79px; LEFT: 86px; POSITION:
absolute; TOP: 113px; VISIBILITY: hidden;
WIDTH: 65px; Z-INDEX:
1">
//层j1的表示方法。j1是此层的代号，其他是位置或状态属性。
<table border=0
bordercolordark=#a7cce4 cellpadding=0
cellspacing=2 width=60
bgcolor=#33CCCC>
<tbody> <tbody>
<tr>
<td
class=nine width="88%"><font
color=#000000><a
href="#1">子菜单1</a></font></td>
</tr>
<tr>
<td
class=nine width="88%"><font
color=#000000><a
href="#2">子菜单2</a></font></td>
</tr>
<tr>
<td
class=nine width="88%"><font
color=#000000><a
href="#3">子菜单3</a></font></td>
</tr>
<tr>
<td
class=nine width="88%"><font
color=#000000><a
href="#4">子菜单4</a></font></td>
</tr>
<tbody></tbody>
</table>
<div
align="left"></div>
</div>
<div
id=j2 style="HEIGHT: 79px; LEFT: 151px;
POSITION: absolute; TOP: 113px;
VISIBILITY: hidden; WIDTH: 65px; Z-INDEX:
2">
//层j2的表示方法。j2是此层的代号，其他是位置或状态属性。
<table border=0
bordercolordark=#a7cce4 cellpadding=0
cellspacing=2 width=60
bgcolor=#33CCCC>
<tbody> <tbody>
<tr>
<td
class=nine width="88%"><font
color=#000000><a
href="#1">子菜单1</a></font></td>
</tr>
<tr>
<td
class=nine width="88%"><font
color=#000000><a
href="#2">子菜单2</a></font></td>
</tr>
<tr>
<td
class=nine width="88%"><font
color=#000000><a
href="#3">子菜单3</a></font></td>
</tr>
<tr>
<td
class=nine width="88%"><font
color=#000000><a
href="#4">子菜单4</a></font></td>
</tr>
<tbody></tbody>
</table>
<div
align="left"></div>
</div>
第三步：在想使用层的超级链接中加入以下代码。
<a
href="http://www.j500.com/" onMouseOver="MM_showHideLayers
('j2','','hide','j1','','show')">菜单
1</a>
//红色部分是要加入的代码。表示当鼠标经过"菜单1"链接时，调用MM_showHideLayers函数，使j2层隐藏、j1层显示。
<a
href="http://www.j500.com/" onMouseOver="MM_showHideLayers
('j1','','hide','j2','','show')">菜单
2</a>
//红色部分是要加入的代码。表示当鼠标经过"菜单2"链接时，调用MM_showHideLayers函数，使j1层隐藏、j2层显示。
第四步：为了隐藏显示后的层，在必要的表格（除菜单1、菜单2表格的其他表格）中加入以下代码。
<table onMouseOver="MM_showHideLayers
('j1','','hide','j2','','hide')">
//红色部分是要加入的代码。表示当鼠标经过此表格时，调用MM_showHideLayers函数，使j1层、j2层都隐藏。
第五步：倒杯咖啡庆祝一下，若您不是弱智的话应该行了。（注意:蓝色解释部分不要加入您的主页代码）
|
