功能：实现鼠标经过表格内容自动切换
实现方法：将默认显示的信息样式定义成与信息不同。同时将默认显示的信息所在的表格的style的display属性设置为空，其他显示信息的表格的style的display属性设置为none。然后在导航处用mouseover()事件做触发，调用showInfo()函数实现显示内容的切换。
本例制作比较粗糙简单，主要目的是使大家明白其制作原理和实现方法。更多细致漂亮的效果还有待大家自己添加完善。有任何问题请加QQ群：50076462探讨。
泡泡ASP相关代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>如何实现鼠标经过表格内容自动切换</title>
</head>
<script language="javascript">
function showInfo(f)
{
document.getElementById("popasp_table1").style.display="none";
document.getElementById("popasp_table2").style.display="none";
document.getElementById("popasp_table3").style.display="none";
document.getElementById("t1").bgColor="#FFFFFF";
document.getElementById("t2").bgColor="#FFFFFF";
document.getElementById("t3").bgColor="#FFFFFF";
document.getElementById("popasp_table"+f).style.display="";
document.getElementById("t"+f).bgColor="#0000FF";
}
</script>
<body>
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="30" align="center" id="t1" onmouseover="showInfo(1);">表格1内容</td>
<td height="30" align="center" id="t2" onmouseover="showInfo(2);">表格2内容</td>
<td height="30" align="center" id="t3" onmouseover="showInfo(3);">表格3内容</td>
</tr>
</table></td>
</tr>
<tr>
<td>
<table width="100%" border="1" cellpadding="10" cellspacing="0" id="popasp_table1">
<tr>
<td height="200" align="left" valign="top">表格1内容</td>
</tr>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="10" id="popasp_table2" style="display:none;">
<tr>
<td height="200" align="left" valign="top">表格2内容</td>
</tr>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="10" id="popasp_table3" style="display:none;">
<tr>
<td height="200" align="left" valign="top">表格3内容</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html> |
添加到百度搜藏
收藏到QQ书签