鼠标停在链接上，如何弹出页面预览

很多卖东西的网站上都可以这样，Google也可以这样。
就是鼠标停在链接上，弹出一个预览，当然，这个预览可以不是打开链接以后的页面，自己拼出来的文字描述也可以。
最好不要用jQuery

解决方案 »

  1.   

    偶还是邪恶的用jquery了... 不过知道下原理还是一样的 可以尝试自己写一个
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style>
    #tooltip{
    border-style:solid;
    border-width:"1px";
    background-color:"#FFFFCC";
    font-size:"12px"
    }
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    $(document).ready(function(){
    var y = 20;
    var x = 10;
    $("a.tooltip").mouseover(function(e){
    this.myTitle = this.title;
    // 清除自带的提示
    this.title = "";
    var tooltip = "<div id='tooltip'>"+this.myTitle+"</div>";
    // 把提示内容追加到文d档中
    $("body").append(tooltip);
    // 设置提示层显示位置
    $("#tooltip").css({"position":"absolute","top":e.pageY+y+"px","left":e.pageX+x+"px"}).show();
    }).mouseout(function(e){
    // 还原自带的提示
    this.title = this.myTitle;
    $("#tooltip").remove();
    }).mousemove(function(e){// 添加移动跟随
    $("#tooltip").css({"position":"absolute","top":e.pageY+y+"px","left":e.pageX+x+"px"});
    })


    })
    //-->
    </SCRIPT>
     </HEAD> <BODY>
      <p><a a href="#" title="这是我的超链接提示1" class="tooltip">提示11111111111111111111111111111111111</a></p>
      <p><a a href="#" title="这是我的超链接提示2" class="tooltip">提示2</a></p>
      <p><a a href="#" title="自带的提示">自带的提示</a></p>
     </BODY>
    </HTML>
      

  2.   

    <html>
    <head>
    <script>
    function $(id){return document.getElementById(id)}function showTipDiv(a){
      //AJAX取得该链接文件的内容，进行处理后，填充到DIV
      //.....
      $('tip').innerHTML=a.url+"链接的内容：AJAX内容";
      $('tip').style.display="block"
      $('tip').style.left=(a.offsetLeft+a.offsetWidth)+"px"
      $('tip').style.top=a.offsetTop+"px"
    }
    </script>
    <style>
    #tip{
      position:absolute;
      z-Index:99;
      width:200px;
      display:none;
      border:1px solid red;
    }
    </style></head>
    <body>
    <div id=tip>
    这里是超链接的内容
    </div>
    <a href="aa.php" onmouseover='showTipDiv(this)' onmouseout="$('tip').style.display='none'">超链接111</a><br>
    <a href="bb.php" onmouseover='showTipDiv(this)' onmouseout="$('tip').style.display='none'">超链接222</a></body>
    </html>