实现鼠标经过，离开，点击三种效果
2007-09-14 09:21
676 查看
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
<!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 id="Head1" runat="server">
<title>管理中心－修改登录密码</title>
<link href="App_Themes/style.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
function overImg1()
{
var img1 = document.getElementById("sqfj");
var img2 = document.getElementById("gmjf");
var img3 = document.getElementById("grsz");
var img4 = document.getElementById("zhgl");
img1.src = "image/sqfj_over.jpg";
img2.src = "image/gmjf.jpg";
img3.src = "image/grsz.jpg";
img4.src = "image/zhgl.jpg";
document.getElementById("sqfjdiv").style.display="block";
document.getElementById("gmjfdiv").style.display="none";
document.getElementById("grszdiv").style.display="none";
document.getElementById("xgmm").style.display="none";
document.getElementById("txdiv").style.display="none";
document.getElementById("szmxdiv").style.display="none";
document.getElementById("ZHTXdiv").style.display="none";
document.getElementById("ZHMMdiv").style.display="none";
}
function overImg2()
{
var img1 = document.getElementById("sqfj");
var img2 = document.getElementById("gmjf");
var img3 = document.getElementById("grsz");
var img4 = document.getElementById("zhgl");
img1.src = "image/sqfj.jpg";
img2.src = "image/gmjf_over.jpg";
img3.src = "image/grsz.jpg";
img4.src = "image/zhgl.jpg";
document.getElementById("sqfjdiv").style.display="none";
document.getElementById("gmjfdiv").style.display="block";
document.getElementById("grszdiv").style.display="none";
document.getElementById("xgmm").style.display="none";
document.getElementById("txdiv").style.display="none";
document.getElementById("szmxdiv").style.display="none";
document.getElementById("ZHTXdiv").style.display="none";
document.getElementById("ZHMMdiv").style.display="none";
}
function overImg3()
{
var img1 = document.getElementById("sqfj");
var img2 = document.getElementById("gmjf");
var img3 = document.getElementById("grsz");
var img4 = document.getElementById("zhgl");
img1.src = "image/sqfj.jpg";
img2.src = "image/gmjf.jpg";
img3.src = "image/grsz_over.jpg";
img4.src = "image/zhgl.jpg";
document.getElementById("sqfjdiv").style.display="none";
document.getElementById("gmjfdiv").style.display="none";
document.getElementById("grszdiv").style.display="block";
document.getElementById("xgmm").style.display="block";
document.getElementById("txdiv").style.display="none";
document.getElementById("szmxdiv").style.display="none";
document.getElementById("ZHTXdiv").style.display="none";
document.getElementById("ZHMMdiv").style.display="none";
}
function overImg4()
{
var img1 = document.getElementById("sqfj");
var img2 = document.getElementById("gmjf");
var img3 = document.getElementById("grsz");
var img4 = document.getElementById("zhgl");
img1.src = "image/sqfj.jpg";
img2.src = "image/gmjf.jpg";
img3.src = "image/grsz.jpg";
img4.src = "image/zhgl_over.jpg";
document.getElementById("sqfjdiv").style.display="none";
document.getElementById("gmjfdiv").style.display="none";
document.getElementById("grszdiv").style.display="none";
document.getElementById("xgmm").style.display="none";
document.getElementById("txdiv").style.display="block";
document.getElementById("szmxdiv").style.display="block";
document.getElementById("ZHTXdiv").style.display="block";
document.getElementById("ZHMMdiv").style.display="block";
}
function Redirect(url)
{
var ifrm = document.getElementById("ifrmBody");
ifrm.src = url;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body onmousedown="objdown()">
<form id="form1" runat="server">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table width="995px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" align="right" valign="top" style="height: 56px; background-image: url(image/top.jpg)">
<!-- 头菜单开始 -->
<table width="250" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<div style="cursor: hand;" onmouseover="imgg1.src='image/index_over.GIF'; divsy.className='style1'"
onmouseout="imgg1.src='image/index.GIF';divsy.className='style2'">
<table>
<tr>
<td>
<img alt="设为首页" id="imgg1" src="image/index.gif" /></td>
<td>
<div id="divsy">
设为首页</div>
</td>
</tr>
</table>
</div>
</td>
<td valign="top">
<div style="cursor: hand;" onmouseover="imgg2.src='image/sc_over.GIF'; divsc.className='style1'"
onmouseout="imgg2.src='image/sc.GIF';divsc.className='style2'">
<table>
<tr>
<td>
<img alt="收藏本站" id="imgg2" src="image/sc.GIF" /></td>
<td>
<div id="divsc">
收藏本站</div>
</td>
</tr>
</table>
</div>
</td>
<td valign="top">
<div style="cursor: hand;" onmouseover="imgg3.src='image/lx_over.GIF'; divlx.className='style1'"
onmouseout="imgg3.src='image/lx.GIF';divlx.className='style2'">
<table>
<tr>
<td>
<img alt="联系我们" id="imgg3" src="image/lx.GIF" /></td>
<td>
<div id="divlx">
联系我们</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<!-- 头菜单结束 -->
</td>
</tr>
<tr>
<td rowspan="2" style="width: 150px; height: 542px; background-image: url(image/left.jpg)">
<!-- 子导航栏开始 -->
<table id="tbAll" width="150" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td style="width: 10px; height: 30px">
</td>
<td style="width: 25px">
</td>
<td style="width: 106px" rowspan="7" valign="top">
<table width="106" border="0" cellpadding="0" cellspacing="0" id="tb">
<tr>
<td style="height: 23px">
</td>
</tr>
<tr>
<td style="height: 100px">
<div id="sqfjdiv" style="cursor: hand; display: none" onmousedown="objdown()">
<table border="0" cellpadding="0" cellspacing="6">
<tr>
<td align="center">
<img alt="申请房间" id="sqfj_two" src="image/sqfj_two.JPG" width="53" height="53" /></td>
</tr>
<tr>
<td valign="middle">
<span id="divsqfj_two">申请房间</span></td>
</tr>
</table>
</div>
<div id="gmjfdiv" style="cursor: hand; display: none" onmousedown="objdown()">
<table border="0" cellpadding="0" cellspacing="6">
<tr>
<td align="center">
<img alt="购买积分" id="gmjf_two" src="image/gmjf_two.JPG" width="53" height="53" /></td>
</tr>
<tr>
<td valign="middle">
<span id="divgmjf_two">购买积分</span></td>
</tr>
</table>
</div>
<div id="grszdiv" style="cursor: hand; display: none" onmousedown="objdown()" onclick="Redirect('ModifyPersonInfo.aspx')">
<table border="0" cellpadding="0" cellspacing="6">
<tr>
<td align="center">
<img alt="个人资料设置" id="grzlsz" src="image/grzlsz.jpg" width="53" height="53" /></td>
</tr>
<tr>
<td valign="middle">
<span id="divgrzlsz">个人资料设置</span></td>
</tr>
</table>
</div>
<div id="txdiv" style="cursor: hand; display: none" onmousedown="objdown()">
<table border="0" cellpadding="0" cellspacing="6">
<tr>
<td align="center">
<img alt="提现资料设置" id="tjzl" src="image/tjzl.JPG" width="53" height="53" /></td>
</tr>
<tr>
<td valign="middle">
<span id="divtjzl">提现资料设置</span></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="height: 8px">
</td>
</tr>
<tr>
<td style="height: 100px" valign="top">
<div id="xgmm" style="cursor: hand; display: none" onmousedown="objdown()">
<table border="0" cellpadding="0" cellspacing="6">
<tr valign="top">
<td style="width: 73px" align="center">
<img alt="修改登陆密码" id="xgdlmm" src="image/xgdlmm.jpg" width="53" height="53" onclick="Redirect('update_login_pwd.aspx')" /></td>
</tr>
<tr>
<td valign="middle">
<span id="divxgdlmm">修改登陆密码</span></td>
</tr>
</table>
</div>
<div id="szmxdiv" style="cursor: hand; display: none" onmousedown="objdown()">
<table border="0" cellpadding="0" cellspacing="6">
<tr valign="top">
<td style="width: 73px" align="center">
<img alt="帐户收支明细" id="szmx" src="image/szmx.JPG" width="53" height="53" /></td>
</tr>
<tr>
<td valign="middle">
<span id="divszmx">帐户收支明细</span></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="height: 8px">
</td>
</tr>
<tr>
<td style="height: 100px" valign="top">
<div id="ZHTXdiv" style="cursor: hand; display: none" onmousedown="objdown()">
<table border="0" cellpadding="0" cellspacing="6">
<tr valign="top">
<td style="width: 73px" align="center">
<img alt="帐户提现" id="zhtx" src="image/zhtx.JPG" width="53" height="53" /></td>
</tr>
<tr>
<td valign="middle">
<span id="divzhtx">帐户提现</span></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="height: 8px">
</td>
</tr>
<tr>
<td style="height: 100px" valign="top">
<div id="ZHMMdiv" style="cursor: hand; display: none" onmousedown="objdown()">
<table border="0" cellpadding="0" cellspacing="6">
<tr valign="top">
<td style="width: 73px" align="center">
<img alt="设置帐户密码" id="szzhmm" src="image/szzhmm.JPG" width="53" height="53" /></td>
</tr>
<tr>
<td valign="middle">
<span id="divszzhmm">设置帐户密码</span></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="height: 14px">
</td>
</tr>
<tr>
<td style="height: 83px">
</td>
</tr>
</table>
<!-- 子导航栏到些结束 -->
</td>
<td style="width: 10px">
</td>
</tr>
<tr>
<td style="width: 10px; height: 14px">
</td>
<td style="width: 25px">
</td>
<td style="width: 10px">
</td>
</tr>
<!-- 主导航栏开始 -->
<tr valign="top">
<td style="height: 90px">
</td>
<td>
<div id="Div1" style="cursor: hand;">
<img alt="申请房间" id="sqfj" src="image/sqfj.jpg" width="24" height="87" onclick="overImg1()"
onmousedown="objdown()" /></div>
</td>
<td>
</td>
</tr>
<tr valign="top">
<td style="height: 90px">
</td>
<td>
<div id="goumai" style="cursor: hand;">
<img alt="购买积分" id="gmjf" src="image/gmjf.jpg" width="24" height="87" onclick="overImg2()"
onmousedown="objdown()" /></div>
</td>
<td>
</td>
</tr>
<tr valign="top">
<td style="height: 90px">
</td>
<td>
<div id="geren" style="cursor: hand;">
<img alt="个人设置" id="grsz" src="image/grsz.jpg" width="24" height="87" onclick="overImg3()"
onmousedown="objdown()" /></div>
</td>
<td>
</td>
</tr>
<tr valign="top">
<td style="height: 90px">
</td>
<td>
<div id="zhanghu" style="cursor: hand;">
<img alt="设置帐户密码" id="zhgl" src="image/zhgl.jpg" width="24" height="87" onclick="overImg4()"
onmousedown="objdown()" /></div>
</td>
<td>
</td>
</tr>
<!-- 主导航栏结束 -->
<tr>
<td style="height: 135px">
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
<td>
<!-- 中间头部从这里开始 -->
<table style="width: 845px; height: 76px;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="background-image: url(image/top_2.jpg)">
</td>
</tr>
</table>
<!-- 中间头部到这里结束 -->
<!-- 替换页面从这里开始 -->
<iframe src="" scrolling="no" frameborder="0" id="ifrmBody" height="406px" width="845px">
</iframe>
<!-- 替换页面到这里结束 -->
</td>
</tr>
<tr>
<td style="height: 62px; background-image: url(image/below.jpg)">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="bottom" style="height: 20px">
Copyright © 2003-2007 上海富可信息技术发展有限公司 Email:service@onlineoa.com
</td>
</tr>
<tr>
<td align="center" colspan="2">
法律顾问:上海恒业律师事务所 沪ICP备 05061318
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
<script language="javascript" type="text/javascript">
var img = tb.getElementsByTagName("img"); //得到所有 img 元素卷标名称
function objdown()
{
detachall();
for(var i=0;i<img.length;i++)
{
img[i].attachEvent("onmouseover",overHandler) //添加事件
img[i].attachEvent("onmouseout",outHandler)
}
if(event.srcElement)
{
if(window.event.srcElement.tagName == "IMG")
{
var id = event.srcElement.id;
event.srcElement.src="image/" +id+"_over.jpg"
event.srcElement.detachEvent("onmouseover",overHandler)
event.srcElement.detachEvent("onmouseout",outHandler)
var v = document.getElementById("div"+id);
if(v != null)
{
v.className="style1";
}
}
else
{
window.event.returnValue = false;
}
}
}
function detachall()
{
for(var i=0;i<img.length;i++)
{
var id = img[i].id //得到 img 的 ID
img[i].detachEvent("onmouseover",overHandler) //去掉 onmouseover 事件, 调用 overHandler 函数
img[i].detachEvent("onmouseout",outHandler) //去掉 onmouseout 事件, 调用 outHandler 函数
img[i].src="image/" +id+".jpg";
var v = document.getElementById("div"+id);
if(v != null)
{
v.className="style2";
}
}
}
function overHandler()
{
var id = event.srcElement.id;
event.srcElement.src="image/" +id+"_over.jpg"
var v = document.getElementById("div"+id);
if(v != null)
{
v.className="style1";
}
}
function outHandler()
{
var id = event.srcElement.id;
event.srcElement.src="image/" +id+".jpg";
var v = document.getElementById("div"+id);
if(v != null)
{
v.className="style2";
}
}
</script>
</body>
</html>
<!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 id="Head1" runat="server">
<title>管理中心－修改登录密码</title>
<link href="App_Themes/style.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
function overImg1()
{
var img1 = document.getElementById("sqfj");
var img2 = document.getElementById("gmjf");
var img3 = document.getElementById("grsz");
var img4 = document.getElementById("zhgl");
img1.src = "image/sqfj_over.jpg";
img2.src = "image/gmjf.jpg";
img3.src = "image/grsz.jpg";
img4.src = "image/zhgl.jpg";
document.getElementById("sqfjdiv").style.display="block";
document.getElementById("gmjfdiv").style.display="none";
document.getElementById("grszdiv").style.display="none";
document.getElementById("xgmm").style.display="none";
document.getElementById("txdiv").style.display="none";
document.getElementById("szmxdiv").style.display="none";
document.getElementById("ZHTXdiv").style.display="none";
document.getElementById("ZHMMdiv").style.display="none";
}
function overImg2()
{
var img1 = document.getElementById("sqfj");
var img2 = document.getElementById("gmjf");
var img3 = document.getElementById("grsz");
var img4 = document.getElementById("zhgl");
img1.src = "image/sqfj.jpg";
img2.src = "image/gmjf_over.jpg";
img3.src = "image/grsz.jpg";
img4.src = "image/zhgl.jpg";
document.getElementById("sqfjdiv").style.display="none";
document.getElementById("gmjfdiv").style.display="block";
document.getElementById("grszdiv").style.display="none";
document.getElementById("xgmm").style.display="none";
document.getElementById("txdiv").style.display="none";
document.getElementById("szmxdiv").style.display="none";
document.getElementById("ZHTXdiv").style.display="none";
document.getElementById("ZHMMdiv").style.display="none";
}
function overImg3()
{
var img1 = document.getElementById("sqfj");
var img2 = document.getElementById("gmjf");
var img3 = document.getElementById("grsz");
var img4 = document.getElementById("zhgl");
img1.src = "image/sqfj.jpg";
img2.src = "image/gmjf.jpg";
img3.src = "image/grsz_over.jpg";
img4.src = "image/zhgl.jpg";
document.getElementById("sqfjdiv").style.display="none";
document.getElementById("gmjfdiv").style.display="none";
document.getElementById("grszdiv").style.display="block";
document.getElementById("xgmm").style.display="block";
document.getElementById("txdiv").style.display="none";
document.getElementById("szmxdiv").style.display="none";
document.getElementById("ZHTXdiv").style.display="none";
document.getElementById("ZHMMdiv").style.display="none";
}
function overImg4()
{
var img1 = document.getElementById("sqfj");
var img2 = document.getElementById("gmjf");
var img3 = document.getElementById("grsz");
var img4 = document.getElementById("zhgl");
img1.src = "image/sqfj.jpg";
img2.src = "image/gmjf.jpg";
img3.src = "image/grsz.jpg";
img4.src = "image/zhgl_over.jpg";
document.getElementById("sqfjdiv").style.display="none";
document.getElementById("gmjfdiv").style.display="none";
document.getElementById("grszdiv").style.display="none";
document.getElementById("xgmm").style.display="none";
document.getElementById("txdiv").style.display="block";
document.getElementById("szmxdiv").style.display="block";
document.getElementById("ZHTXdiv").style.display="block";
document.getElementById("ZHMMdiv").style.display="block";
}
function Redirect(url)
{
var ifrm = document.getElementById("ifrmBody");
ifrm.src = url;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body onmousedown="objdown()">
<form id="form1" runat="server">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table width="995px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" align="right" valign="top" style="height: 56px; background-image: url(image/top.jpg)">
<!-- 头菜单开始 -->
<table width="250" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<div style="cursor: hand;" onmouseover="imgg1.src='image/index_over.GIF'; divsy.className='style1'"
onmouseout="imgg1.src='image/index.GIF';divsy.className='style2'">
<table>
<tr>
<td>
<img alt="设为首页" id="imgg1" src="image/index.gif" /></td>
<td>
<div id="divsy">
设为首页</div>
</td>
</tr>
</table>
</div>
</td>
<td valign="top">
<div style="cursor: hand;" onmouseover="imgg2.src='image/sc_over.GIF'; divsc.className='style1'"
onmouseout="imgg2.src='image/sc.GIF';divsc.className='style2'">
<table>
<tr>
<td>
<img alt="收藏本站" id="imgg2" src="image/sc.GIF" /></td>
<td>
<div id="divsc">
收藏本站</div>
</td>
</tr>
</table>
</div>
</td>
<td valign="top">
<div style="cursor: hand;" onmouseover="imgg3.src='image/lx_over.GIF'; divlx.className='style1'"
onmouseout="imgg3.src='image/lx.GIF';divlx.className='style2'">
<table>
<tr>
<td>
<img alt="联系我们" id="imgg3" src="image/lx.GIF" /></td>
<td>
<div id="divlx">
联系我们</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<!-- 头菜单结束 -->
</td>
</tr>
<tr>
<td rowspan="2" style="width: 150px; height: 542px; background-image: url(image/left.jpg)">
<!-- 子导航栏开始 -->
<table id="tbAll" width="150" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td style="width: 10px; height: 30px">
</td>
<td style="width: 25px">
</td>
<td style="width: 106px" rowspan="7" valign="top">
<table width="106" border="0" cellpadding="0" cellspacing="0" id="tb">
<tr>
<td style="height: 23px">
</td>
</tr>
<tr>
<td style="height: 100px">
<div id="sqfjdiv" style="cursor: hand; display: none" onmousedown="objdown()">
<table border="0" cellpadding="0" cellspacing="6">
<tr>
<td align="center">
<img alt="申请房间" id="sqfj_two" src="image/sqfj_two.JPG" width="53" height="53" /></td>
</tr>
<tr>
<td valign="middle">
<span id="divsqfj_two">申请房间</span></td>
</tr>
</table>
</div>
<div id="gmjfdiv" style="cursor: hand; display: none" onmousedown="objdown()">
<table border="0" cellpadding="0" cellspacing="6">
<tr>
<td align="center">
<img alt="购买积分" id="gmjf_two" src="image/gmjf_two.JPG" width="53" height="53" /></td>
</tr>
<tr>
<td valign="middle">
<span id="divgmjf_two">购买积分</span></td>
</tr>
</table>
</div>
<div id="grszdiv" style="cursor: hand; display: none" onmousedown="objdown()" onclick="Redirect('ModifyPersonInfo.aspx')">
<table border="0" cellpadding="0" cellspacing="6">
<tr>
<td align="center">
<img alt="个人资料设置" id="grzlsz" src="image/grzlsz.jpg" width="53" height="53" /></td>
</tr>
<tr>
<td valign="middle">
<span id="divgrzlsz">个人资料设置</span></td>
</tr>
</table>
</div>
<div id="txdiv" style="cursor: hand; display: none" onmousedown="objdown()">
<table border="0" cellpadding="0" cellspacing="6">
<tr>
<td align="center">
<img alt="提现资料设置" id="tjzl" src="image/tjzl.JPG" width="53" height="53" /></td>
</tr>
<tr>
<td valign="middle">
<span id="divtjzl">提现资料设置</span></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="height: 8px">
</td>
</tr>
<tr>
<td style="height: 100px" valign="top">
<div id="xgmm" style="cursor: hand; display: none" onmousedown="objdown()">
<table border="0" cellpadding="0" cellspacing="6">
<tr valign="top">
<td style="width: 73px" align="center">
<img alt="修改登陆密码" id="xgdlmm" src="image/xgdlmm.jpg" width="53" height="53" onclick="Redirect('update_login_pwd.aspx')" /></td>
</tr>
<tr>
<td valign="middle">
<span id="divxgdlmm">修改登陆密码</span></td>
</tr>
</table>
</div>
<div id="szmxdiv" style="cursor: hand; display: none" onmousedown="objdown()">
<table border="0" cellpadding="0" cellspacing="6">
<tr valign="top">
<td style="width: 73px" align="center">
<img alt="帐户收支明细" id="szmx" src="image/szmx.JPG" width="53" height="53" /></td>
</tr>
<tr>
<td valign="middle">
<span id="divszmx">帐户收支明细</span></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="height: 8px">
</td>
</tr>
<tr>
<td style="height: 100px" valign="top">
<div id="ZHTXdiv" style="cursor: hand; display: none" onmousedown="objdown()">
<table border="0" cellpadding="0" cellspacing="6">
<tr valign="top">
<td style="width: 73px" align="center">
<img alt="帐户提现" id="zhtx" src="image/zhtx.JPG" width="53" height="53" /></td>
</tr>
<tr>
<td valign="middle">
<span id="divzhtx">帐户提现</span></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="height: 8px">
</td>
</tr>
<tr>
<td style="height: 100px" valign="top">
<div id="ZHMMdiv" style="cursor: hand; display: none" onmousedown="objdown()">
<table border="0" cellpadding="0" cellspacing="6">
<tr valign="top">
<td style="width: 73px" align="center">
<img alt="设置帐户密码" id="szzhmm" src="image/szzhmm.JPG" width="53" height="53" /></td>
</tr>
<tr>
<td valign="middle">
<span id="divszzhmm">设置帐户密码</span></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="height: 14px">
</td>
</tr>
<tr>
<td style="height: 83px">
</td>
</tr>
</table>
<!-- 子导航栏到些结束 -->
</td>
<td style="width: 10px">
</td>
</tr>
<tr>
<td style="width: 10px; height: 14px">
</td>
<td style="width: 25px">
</td>
<td style="width: 10px">
</td>
</tr>
<!-- 主导航栏开始 -->
<tr valign="top">
<td style="height: 90px">
</td>
<td>
<div id="Div1" style="cursor: hand;">
<img alt="申请房间" id="sqfj" src="image/sqfj.jpg" width="24" height="87" onclick="overImg1()"
onmousedown="objdown()" /></div>
</td>
<td>
</td>
</tr>
<tr valign="top">
<td style="height: 90px">
</td>
<td>
<div id="goumai" style="cursor: hand;">
<img alt="购买积分" id="gmjf" src="image/gmjf.jpg" width="24" height="87" onclick="overImg2()"
onmousedown="objdown()" /></div>
</td>
<td>
</td>
</tr>
<tr valign="top">
<td style="height: 90px">
</td>
<td>
<div id="geren" style="cursor: hand;">
<img alt="个人设置" id="grsz" src="image/grsz.jpg" width="24" height="87" onclick="overImg3()"
onmousedown="objdown()" /></div>
</td>
<td>
</td>
</tr>
<tr valign="top">
<td style="height: 90px">
</td>
<td>
<div id="zhanghu" style="cursor: hand;">
<img alt="设置帐户密码" id="zhgl" src="image/zhgl.jpg" width="24" height="87" onclick="overImg4()"
onmousedown="objdown()" /></div>
</td>
<td>
</td>
</tr>
<!-- 主导航栏结束 -->
<tr>
<td style="height: 135px">
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
<td>
<!-- 中间头部从这里开始 -->
<table style="width: 845px; height: 76px;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="background-image: url(image/top_2.jpg)">
</td>
</tr>
</table>
<!-- 中间头部到这里结束 -->
<!-- 替换页面从这里开始 -->
<iframe src="" scrolling="no" frameborder="0" id="ifrmBody" height="406px" width="845px">
</iframe>
<!-- 替换页面到这里结束 -->
</td>
</tr>
<tr>
<td style="height: 62px; background-image: url(image/below.jpg)">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="bottom" style="height: 20px">
Copyright © 2003-2007 上海富可信息技术发展有限公司 Email:service@onlineoa.com
</td>
</tr>
<tr>
<td align="center" colspan="2">
法律顾问:上海恒业律师事务所 沪ICP备 05061318
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
<script language="javascript" type="text/javascript">
var img = tb.getElementsByTagName("img"); //得到所有 img 元素卷标名称
function objdown()
{
detachall();
for(var i=0;i<img.length;i++)
{
img[i].attachEvent("onmouseover",overHandler) //添加事件
img[i].attachEvent("onmouseout",outHandler)
}
if(event.srcElement)
{
if(window.event.srcElement.tagName == "IMG")
{
var id = event.srcElement.id;
event.srcElement.src="image/" +id+"_over.jpg"
event.srcElement.detachEvent("onmouseover",overHandler)
event.srcElement.detachEvent("onmouseout",outHandler)
var v = document.getElementById("div"+id);
if(v != null)
{
v.className="style1";
}
}
else
{
window.event.returnValue = false;
}
}
}
function detachall()
{
for(var i=0;i<img.length;i++)
{
var id = img[i].id //得到 img 的 ID
img[i].detachEvent("onmouseover",overHandler) //去掉 onmouseover 事件, 调用 overHandler 函数
img[i].detachEvent("onmouseout",outHandler) //去掉 onmouseout 事件, 调用 outHandler 函数
img[i].src="image/" +id+".jpg";
var v = document.getElementById("div"+id);
if(v != null)
{
v.className="style2";
}
}
}
function overHandler()
{
var id = event.srcElement.id;
event.srcElement.src="image/" +id+"_over.jpg"
var v = document.getElementById("div"+id);
if(v != null)
{
v.className="style1";
}
}
function outHandler()
{
var id = event.srcElement.id;
event.srcElement.src="image/" +id+".jpg";
var v = document.getElementById("div"+id);
if(v != null)
{
v.className="style2";
}
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS实现鼠标经过用户头像显示资料卡的效果，可点击
- JS实现鼠标经过用户头像显示资料卡的效果，可点击
- JS实现的鼠标跟随代码(卡通手型点击效果)
- JavaScript实现鼠标点击后层展开效果的方法
- JS实现响应鼠标点击动画渐变弹出层效果代码
- WPF 实现DataGrid行鼠标经过、点击时的背景、文字、行高等样式
- JQ实现效果：点击（or鼠标滑过）连接时显示内容，再点击（鼠标滑出）连接时隐藏内容
- jQuery实现鼠标点击处心形漂浮的炫酷效果示例
- JS原生代码实现鼠标移动图片随之移动效果（另加点击改变图片效果）
- jquery实现通用版鼠标经过淡入淡出效果
- 定义自己的dataGridView实现鼠标经过时高亮显示的效果
- 用ul li实现边框重合并附带鼠标经过效果
- JS响应鼠标点击实现两个滑块区间拖动效果
- js实现图片显示局部，鼠标经过显示全部的效果
- easyui datagrid 实现鼠标滚动翻页效果（不是点击下一页）
- Jquery使用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
- js实现鼠标点击左上角滑动菜单效果代码
- css实现鼠标经过导航颜色变换效果
- jQuery实现鼠标经过图片变亮效果