请教:鼠标放上去显示某一栏代码如何写呢?
象sina,163等网站首页的效果:例如sina首页导航下面左上角,鼠标放上去可以轮换显示,并可从数据库中读出数据的效果是怎么做的啊?希望能得到高手指教~~
[解决办法]
<TABLE cellSpacing=4 cellPadding=0 width= "100% " border=0>
<TBODY>
<TR>
<TD align=left height=151>
<TABLE class=solid-bottom cellSpacing=0 cellPadding=0 width=400
border=0> <TBODY>
<TR>
<TD width=383 height=19>
<TABLE id=secTable cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD class=sec2 onmouseover=secBoard(0) align=middle
width=70> 测试1 </TD>
<TD class=sec1 onmouseover=secBoard(1) align=middle
width=120> 测试2 </TD>
<TD class=sec1 onmouseover=secBoard(2) align=middle
width=110> 测试3 </TD> </TR> </TBODY> </TABLE> </TD>
<TD width=17>
<SCRIPT language=JavaScript type=text/javascript>
function secBoard(n)
{
for(i=0;i <secTable.cells.length;i++)
secTable.cells[i].className= "sec1 ";
secTable.cells[n].className= "sec2 ";
for(i=0;i <mainTable.tBodies.length;i++)
mainTable.tBodies[i].style.display= "none ";
mainTable.tBodies[n].style.display= "block ";
}
</SCRIPT>
</TD> </TR> </TBODY> </TABLE>
<TABLE id=mainTable height=120 cellSpacing=5 cellPadding=0 width=400
border=0>
<TBODY style= "DISPLAY: block ">
<TR>
<TD height=120>
<TABLE cellSpacing=0 cellPadding=0 width= "100% " border=0>
<TBODY>
<TR>
<TD height=72> 测试1 </TD> </TR>
<TR>
<TD align=right height=22> 测试1 </TD> </TR> </TBODY> </TABLE> </TD> </TR> </TBODY>
<TBODY style= "DISPLAY: none ">
<TR>
<TD height=120>
<TABLE cellSpacing=0 cellPadding=0 width= "100% " border=0>
<TBODY>
<TR>
<TD height=72> 测试2 </TD> </TR>
<TR>
<TD align=right height=22> 测试2 </TD> </TR> </TBODY> </TABLE> </TD> </TR> </TBODY>
<TBODY style= "DISPLAY: none ">
<TR>
<TD height=120>
<TABLE cellSpacing=0 cellPadding=0 width= "100% " border=0>
<TBODY>
<TR>
<TD height=72> 测试3 </TD> </TR>
<TR>
<TD align=right height=22> 测试3 </TD> </TR> </TBODY> </TABLE> </TD> </TR> </TBODY>
<TBODY style= "DISPLAY: none "> </TBODY> </TABLE> </TD> </TR> </TBODY> </TABLE>
[解决办法]
前段时间刚写过一个
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> 无标题文档 </title>
</head>
<body>
<table width= "100% " border= "0 " cellpadding= "2 ">
<tr>
<td> rrggrrg </td>
</tr>
<tr>
<td> <table width= "100% " border= "0 " cellpadding= "2 ">
<tr>
<td id= "headparent1 "> <span onmouseover= "ShowLayer( 'headparent1 ', 'contentparent1 ',1,1, ' ', 'selected '); "> 1层 </span> |
<span onmouseover= "ShowLayer( 'headparent1 ', 'contentparent1 ',2,2, ' ', 'selected ') "> 2层显示 </span> |
<span onmouseover= "ShowLayer( 'headparent1 ', 'contentparent1 ',3,3, ' ', 'selected '); "> 3层显示 </span> |
<span onmouseover= "ShowLayer( 'headparent1 ', 'contentparent1 ',4,4, ' ', 'selected '); "> 4层显示 </span> </td>
</tr>
</table> </td>
</tr>
<tr>
<td id= "contentparent1 ">
<div>
<table width= "100% " border= "1 " cellpadding= "2 ">
<tr>
<td> 11 </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> 111 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> 111 </td>
<td> 111 </td>
</tr>
</table>
</div>
<div>
<table width= "100% " border= "1 " cellpadding= "2 ">
<tr>
<td> 222 </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> 222 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> 222 </td>
<td> 222 </td>
</tr>
</table>
</div>
<div>
<table width= "100% " border= "1 " cellpadding= "2 ">
<tr>
<td> 333 </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> 333 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> 333 </td>
<td> 333 </td>
</tr>
</table>
</div>
<div>
<table width= "100% " border= "1 " cellpadding= "2 ">
<tr>
<td> 444 </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> 444 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> 444 </td>
<td> 444 </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<br>
<br>
<table width= "100% " border= "0 " cellpadding= "2 ">
<tr>
<td colspan= "3 "> 价格走势 </td>
</tr>
<tr>
<td colspan= "2 " id= "contentparent2 ">
<div> 1 </div>
<div> 2 </div>
</td>
<td width= "37% " id= "headparent2 "> <div onmouseover= "ShowLayer( 'headparent2 ', 'contentparent2 ',1,1, ' ', 'selected '); "> 走势1 </div>
<div onmouseover= "ShowLayer( 'headparent2 ', 'contentparent2 ',2,2, ' ', 'selected '); "> 走势2 </div> </td>
</tr>
</table>
<style type= "text/css ">
.common{ background-color:#FF0000;}
.selected{background-color:#0000FF; color:#FFFFCC}
</style>
<script>
function ShowLayer(headParentId,contentParentId,selectedHeaderNo,displayLayerNo,commonCssName,selectedCssName)
{var hParentObj=document.getElementById(headParentId);
var cParentObj=document.getElementById(contentParentId);
var hObjs=hParentObj.getElementsByTagName(hParentObj.firstChild.tagName);
for(a=0;a <hObjs.length;a++)
{//hParentObj.childNodes(a).cl=commonCssName;
hObjs(a).className=commonCssName;
}
hObjs(selectedHeaderNo-1).className=selectedCssName;
for(i=0;i <cParentObj.childNodes.length;i++)
{cParentObj.childNodes(i).style.display= "none ";}
cParentObj.childNodes(displayLayerNo-1).style.display= "block ";
}
ShowLayer( "headparent1 ", "contentparent1 ",1,1, " ", "selected ");
ShowLayer( "headparent2 ", "contentparent2 ",2,2, " ", "selected ");
</script>
</body>
</html>
