实现鼠标经过,离开,点击三种效果

原创 2007年09月14日 09:21:00

<%@ 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 &copy; 2003-2007 上海富可信息技术发展有限公司 Email:service@onlineoa.com
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="center" colspan="2">
                                            法律顾问:上海恒业律师事务所&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;沪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实现鼠标经过用户头像显示资料卡的效果,可点击

基于项目的需要,需要制作出如下的一种页面效果:当用户鼠标经过好友列表中好友头像时,显示该好友的基本资料,其实也就是类似QQ客户端的那种功能。        网上找了很多代码,基本都实现了鼠标悬浮之...

js中的事件响应,实现网页交互,鼠标点击、经过等

1.什么是事件 JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。 ...

JS实现侧边栏鼠标经过弹出框+缓冲效果

可能这个标题起得不够恰当,简单来说就是:当鼠标移到最左侧时,移出一个框。 首先,我们用两个div来简单布局以下页面: 分享到 这个分享框的弹出原理是:把内层div定位到外层div最右侧紧贴,...

jquery实现在鼠标点击处的炫酷效果

鼠标点击一下,在鼠标上方显示一个爱心❤,并有慢慢向上消失的效果,如下图噢 是不是很炫酷,直接贴代码: 测试 *{ margin: 0px; padding: 0px; } ...
  • Dailoge
  • Dailoge
  • 2017年06月08日 22:38
  • 307

HTML 实现伪类之input输入框鼠标点击边框变色效果

CSS中 html中 结果

Qt-QML-Button-ButtonStyle-实现鼠标滑过点击效果

上次实现的自定义的Button功能是用的自定义的Rectangle来实现的,在慢慢的接触了QML之后,发现QML有自己定义的Button 这里盗版贴上Qt帮助文档中的部分关于Button的属性内容 ...

实现下拉列表,点击其他位置自动隐藏效果的三种方式比较

实现效果:1.点击按钮展开下拉列表 2.点击下拉列表中的选项进行选择,随后收起下拉列表 3.点击除下拉列表外的位置(包括按钮),收起下拉列表效果图如下所示: 完整代码请查看: https://...

CSS 鼠标响应事件,鼠标经过CSS,鼠标移动CSS,鼠标点击CSS

几种鼠标触发CSS事件。   说明: onMouseDown 按下鼠标时触发  onMouseOver 鼠标经过时触发  onMouseUp 按下鼠标松开鼠标时触发  onMouseOut 鼠标...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实现鼠标经过,离开,点击三种效果
举报原因:
原因补充:

(最多只允许输入30个字)