欢迎光临
 
日历
<<  < 2009 - >  >>
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
最新日志
最新评论
最新留言
 
title提示效果

<html>
<head>
  <title></title>
  <style type="text/css">
    *{
      font-size:9pt;
      margin:0px;padding:0px;
    }

    #tips{
        position:absolute;display:none;
        background:#FF6633;width:250px;
        border:1px solid #000;color:#fff
    }

    #title{
      background:#333;padding:0px 3px;
      height:20px;line-height:20px;
      text-align:right;font-weight:bold;
    }
    #content{
      height: 20px;
      padding:2px;
    }
  </style>
  <script type="text/javascript">
    function addEvent(elm, evType, fn, useCapture){
        if (elm.addEventListener){
            elm.addEventListener(evType, fn, useCapture);
            return true;
        } else if (elm.attachEvent){
            var r = elm.attachEvent("on"+evType, fn);
            return r;
        } else {
            alert("Handler could not be removed");
        }
    }

    function linkTitle(){
        if(!document.getElementsByTagName) return ;
        var anchors=document.getElementsByTagName("a");
        for(var i=0;i<anchors.length;i++){
            anchor=anchors[i];
            if(anchor.getAttribute("tip")){
                addEvent(anchor,"mouseover",linkMouseOver);
                addEvent(anchor,"mouseout",linkMouseOut);
            }
        }
    }

    function linkMouseOver(){
        var title=document.getElementById("tips");
        title.style.top=event.y;
        title.style.left=event.x;
        title.style.display="block";
        document.getElementById("title").innerHTML=event.srcElement.getAttribute("tip").split(":")[0];
        document.getElementById("content").innerHTML=event.srcElement.getAttribute("tip").split(":")[1];
    }
    function linkMouseOut(){
        document.getElementById("tips").style.display="none";
    }
  </script>
</head>

<body>
<div id="tips">
<div id="title"></div>
<div id="content"></div>
</div>
<div style="display:block">
<a href="#" tip="标题一:内容一在这里">link1</a><br />
<a href="#" tip="标题二:内容二在这里">link2</a><br />
<a href="#">link3</a><br />
<a href="#">link4</a><br />
<a href="#">link5</a><br />
<a href="#">link6</a><br />
<a href="#">link7</a><br />
</div>
<script type="text/javascript">
linkTitle();
</script>
</body>
</html>

本文所有信息都是由http://www.isee5.com Isee5音乐网提供

isee5 发表于 2008/1/21 14:46:00 | 阅读全文 | 回复(0) | 引用通告 | 编辑
 
  • 标签:title提示效果 
  • 发表评论:
     
         
    Powered by Oblog.