鼠标移动到图片或文字上，弹出一层。像QQ空间的效果那样

鼠标移动到图片或文字上，弹出一层。像QQ空间的效果那样，把鼠标放到个人图像上弹出的详细信息。 鼠标能够移动到层上，并且弹出的层可以任意设置样式，
最好能发一个源码给我。请多多帮忙！

解决方案 »

  1.   


    <script type="text/javascript">
    function showDiv(){
    document.getElementById('oDiv').style.display='block';
    }
    function hiddDiv(){
    document.getElementById('oDiv').style.display='none';
    }
    </script>
    </head><body>
    <div class="aa" onmouseover="showDiv()" onmouseout="hiddDiv()" style="width:400px;"><a href="#">onmouseove</a>
    <div id="oDiv" style="display:none; width:100%; height:200px; background-color:#0FF">test</div>
    </div>
    这是基本原理 至于信息框的位置 可以用position:absolute（上层DIV用position:relative）来随便定义
      

  2.   

    楼上的这种效果 ， 我鼠标不能放到弹出的那个层上 ， 你打开QQ空间，下面这个是我的QQ空间，，把鼠标放到那个图个人图片上弹的出那效果。http://user.qzone.qq.com/409308658?ADUIN=229866246&ADSESSION=1281320391&ADTAG=CLIENT.QQ.3007_FriendTip.0&ptlang=2052 谁有这种效果的代码
      

  3.   

    显示详细信息需要js，样式效果需要css
      

  4.   

    <html>
     <head>
     <meta charset="utf-8"/>
     </head>
     <style type="text/css"> 
    .helplay { 
    z-index: 3; 
    position: absolute; 
    border: 1px solid #FFC30E; 
    padding: 5px; 
    background-color: #FFFBB8; 
    text-align: left; 
    color: #9C7600; 
    width: 330px; 
    height: 180px;
    font-size: 15px; 
    font-family: arial, sans-serif; 
    } 
    </style> 
    <script type="text/javascript">
    var t=0;
    function showSub(event)
    {
    clearTimeout(t);
    var p = window.event ? [event.clientX, event.clientY] : [e.pageX, e.pageY]; 
        with (document.getElementById("hid").style) { 
        display = "block"; 
        left = p[0] + 5 + "px"; 
        top = p[1] + 5 + "px"; 
        }      
     
    }
    function hidSub(event)
    {
    t=setTimeout(function(){
     document.getElementById("hid").style.display="none";
     },100);
    }
    </script> 
     <body>
     <div style="height:1000PX;"></div>
     <div style=" width:100%  ; text-align:right;">
      <a href="javascript:void(0)" onmouseover="showSub(event);" onmouseout="hidSub(event);">鼠标移上来</a></div>
      <br />
      <div onmouseover="showSub();" onmouseout="hidSub();" id="hid" style="display:none;" class="helplay"> 
       <a href=" http://www.google.com.hk">google</a>
       <a href=" http://www.baidu.com">baidu</a>
       <a href=" http://bbs.csdn.net/">csdn</a>
      </div>
     </body>
    </html>这个我再加了两个DIV  让那个内容显示在右下角，  弹出的框位置就不对了。。 
     还有办法解决没， 我现在网站上正须要这种效果， 我是搞.net 的， 不懂js , 多指教指教啊 
    谁能帮我解决一下