谁有js实现信息提示的代码？

谁有js实现信息提示的代码？
就是比方说把鼠标放在一个人名上可以显示他的邮箱、图片等信息！

解决方案 »

  1.   

    <!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>
        <title>鼠标悬停信息提示</title>    <script language="javascript">
        function overtip()
        {
            var tip = this;
            
            this.content = null;
        
            //获得目标element的位置参数
            this.getElementpos = function(o) {            var t = o.offsetTop;
                var l = o.offsetLeft;
                var w = o.offsetWidth;
                var h = o.offsetHeight;
                while( o = o.offsetParent)
                {
                    t += o.offsetTop;
                    l += o.offsetLeft;
                }
                t += h;
                return { top: t, left: l, width: w, height: h }        
            }
            
            //popupMenu的显示方法，参数w-width(popupMenu宽),h-height(popupMenu高),o-parent Object(popupMenu的父对象)
            this.show = function(t,l,w,h,o) {            l = l+"px";
                t = t+"px";
                w = w+"px";
                h = h+"px";            var layer = document.createElement('Div');
                
                //应用IFRAME以遮蔽顶层对象
                var ifr = document.createElement("IFRAME");
                ifr.id = 'ifrContent'
                ifr.style.width = w;
                ifr.style.height = h;
                ifr.style.border = "none";
                ifr.style.zIndex = "-1";
                ifr.style.position = "absolute";
                ifr.style.top = "0px";
                ifr.style.left = "0px";
                ifr.scrolling = 'no';
                
                //应用DIV以遮蔽IFRAME的右键
                //关键字显示容器
                var il = document.createElement("DIV");
                il.id = "layercontent";
                il.style.textAlign = 'left';
                il.style.width = w;
                il.style.height = h;
                il.style.overflowX = "hidden";
                il.style.overflowY = "auto";
                il.style.zIndex = "100";
                il.style.position = "absolute";
                il.style.top = "0px";
                il.style.left = "0px";
                il.style.padding = '5px';
                il.innerHTML = tip.content;
                
                layer.id = "dhlayer";
                layer.style.padding = "0px";
                layer.style.border = "none";
                layer.style.zIndex = "1";
                layer.style.width = w;
                layer.style.height = h;
                layer.style.position = "absolute";
                layer.style.left = l;
                layer.style.top = t;
                layer.appendChild(ifr);
                layer.appendChild(il);
                
                if(document.getElementById("dhlayer")!=null)
                {
                    o.replaceChild(layer,document.getElementById("dhlayer"));
                }
                else
                {
                    o.appendChild(layer);
                }    
            }
            
            //隐藏popupMenu
            this.hide = function(o)
            {
                if(document.getElementById("dhlayer")!=null)
                {   
                    o.removeChild(document.getElementById("dhlayer"));
                }
            }
        }    var tip = new overtip();
        
        var width = 200;
        
        var height = 150;
        
        function mouseover(object)
        {
            //要显示的信息
            tip.content = '<div>title:1</div><div>body:2</div><div>foot:3</div>'
            
            var pos = tip.getElementpos(object);
            
            tip.show(pos.top,pos.left,width,height,document.body);
        }
        
        function mouseout()
        {
            tip.hide(document.body);
        }
        </script></head>
    <body>
        <div>
            <a onmouseover="mouseover(this);" onmouseout="mouseout();">把鼠标放上来！！！</a>
        </div>
    </body>
    </html>