说明: 非常简单的导航“菜块”呵
效果: 点这里看效果!
代码: 要完成此效果把如下代码加入到<body>区域中:
<!--要完成此效果把如下代码加入到<body>区域中-->
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var linktext=new Array()
linktext[0]='<table border="0" width="210"
height="185" bgcolor="#FF9900" cellpadding="8"
cellspacing="0"><tr><td valign="top"><font
face="arial" size="4"><b>Try
it out!</b></font></td></tr></table>'
linktext[1]='<table border="0" width="210"
height="185" bgcolor="#D1FD80" cellpadding="8"
cellspacing="0"><tr><td valign="top"><font
face="arial" size="4"><b>Try
it out!</b></font></td></tr></table>'
linktext[2]='<table border="0" width="210"
height="185" bgcolor="#FDB9FD" cellpadding="8"
cellspacing="0"><tr><td valign="top"><font
face="arial" size="4"><b>Try
it out!</b></font></td></tr></table>'
linktext[3]='<table border="0" width="210"
height="185" bgcolor="#FFFF5E" cellpadding="8"
cellspacing="0"><tr><td valign="top"><font
face="arial" size="4"><b>Try
it out!</b></font></td></tr></table>'
linktext[4]='<table border="0" width="210"
height="185" bgcolor="#C2D7FC" cellpadding="8"
cellspacing="0"><tr><td valign="top"><font
face="arial" size="4"><b>Try
it out!</b></font></td></tr></table>'
var ns6=document.getElementById&&!document.all
var ie=document.all
function show_text(thetext, whichdiv){
if (ie) eval("document.all."+whichdiv).innerHTML=linktext[thetext]
else if (ns6) document.getElementById(whichdiv).innerHTML=linktext[thetext]
}
function reset(whichdiv){
if (ie) eval("document.all."+whichdiv).innerHTML='<table
border="0" width="210" height="185"
bgcolor="#F88530" cellpadding="0" cellspacing="8"><tr><td
valign="top"><font face="arial"
size="4"><b>鼠标移到左边各类目上看效果</b></font></td></tr></table>'
else if (ns6) document.getElementById(whichdiv).innerHTML='<table
border="0" width="210" height="185"
bgcolor="#F88530" cellpadding="8" cellspacing="0"><tr><td
valign="top"><font face="arial"
size="4"><b>鼠标移到左边各类目上看效果</b></font></td></tr></table>'}
// End -->
</script><p><table border="0" width="370"
bgcolor="black" cellpadding="3" cellspacing="0"
align="center">
<tr><td>
<table border="0" width="370" cellpadding="0"
cellspacing="0">
<tr><td>
<table border="0" width="160" bgcolor="#F88530"
cellpadding="8" cellspacing="0">
<tr>
<td onclick="window.location='#'" onmouseover="bgColor='#FF9900';
show_text(0,'div1')" onmouseout="bgColor='#F88530';
reset('div1')" style="cursor:pointer; cursor:hand"><font
face="arial" size="4"><b>Try
this link</b></font></td>
</tr>
<tr>
<td onclick="window.location='#'" onMouseover="bgColor='#D1FD80';
show_text(1,'div1')" onMouseout="bgColor='#F88530';
reset('div1')" style="cursor:pointer; cursor:hand"><font
face="arial" size="4"><b>Try
this link</b></font></td>
</tr>
<tr>
<td onclick="window.location='#'" onMouseover="bgColor='#FDB9FD';
show_text(2,'div1')" onMouseout="bgColor='#F88530';
reset('div1')" style="cursor:pointer; cursor:hand"><font
face="arial" size="4"><b>Try
this link</b></font></td>
</tr>
<tr>
<td onclick="window.location='#'" onMouseover="bgColor='#FFFF5E';
show_text(3,'div1')" onMouseout="bgColor='#F88530';
reset('div1')" style="cursor:pointer; cursor:hand"><font
face="arial" size="4"><b>Try
this link</b></font></td>
</tr>
<tr>
<td onclick="window.location='#'" onMouseover="bgColor='#C2D7FC';
show_text(4,'div1')" onMouseout="bgColor='#F88530';
reset('div1')" style="cursor:pointer; cursor:hand"><font
face="arial" size="4"><b>Try
this link</b></font></td>
</tr>
</table>
</td>
<td>
<span id="div1"><table border="0"
width="210" height="185" bgcolor="#F88530"
cellpadding="8" cellspacing="0"><tr><td
valign="top"><font face="arial"
size="4"><b>鼠标移到左边各类目上看效果</b></font></td></tr></table></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
作者:佚名 来源: 网上转帖 |