首页 | IT新闻 | 硬件 | 操作系统 | 开发 | 网络编程 | 数据库 | 热门框架 | 网络安全 | 组网 | 建站指南 | 网页制作 | 特效 | 实用技巧 | 服务器 | 办公 | QQ | 探索 | 社区

  • 技术部落
  • 部落首页 > 网页特效 > 正文
  • 鼠标经过显示大图另一实现效果
      2007-5-23  来源:技术部落  编辑:Jsbulo  热度:

    将以下代码放到<body></body>之间

    <STYLE type=text/css>BODY {
     MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 4px; MARGIN-RIGHT: 0px; FONT-FAMILY: "宋体"
    }
    A {
     FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: black; TEXT-DECORATION: none
    }
    A:hover {
     FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: red; TEXT-DECORATION: underline
    }
    A:active {
     FONT: 9pt "宋体"; CURSOR: hand; COLOR: #ff0033
    }
    </style>
    <script>

    function show(tips,flag,url){
    var my_tips=document.all.mytips;
    if(flag){
        my_tips.style.display="";
        if (url!=null){my_tips.innerHTML="<img src=’"+url+"’align=left>"+tips;}
        else{ my_tips.innerHTML=tips;}
        my_tips.style.left=event.clientX+10;
        my_tips.style.top=event.clientY+10;
       }
    else
      {
       my_tips.style.display="none";
       }
    }
    </script>

    <a href="http://www.jsbulo.com/" tips="" onmousemove=show(this.tips,1,’http://www.jsbulo.com/img/logo_links.gif’) onmouseout=show(this.tips,0)>技术部落</a>  

    <div id=mytips style="position:absolute;width:150;height:16;border:1 gray solid;font-size:9pt;background-color:#ffffff;color:red;display:none;filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);">
    </div>

    相关链接