一个firefox与IE兼容的问题,点击图片显示div

<!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>这样可以不~

解决方案 »

  1.   

    非常感谢 duwa789() , 正在研究你的代码中....
    因为我不怎么懂javascript, 一个功能做起来真是吃力我的具体功能要求是:  点击一个图片按钮,显示div,点击这个div或这个div中的button或则是这个div以外的地方 这个div就消失开始没有考虑firefox 在IE下可以,结果在firefox下测试,都不起作用弄的焦头烂额.....
      

  2.   

    参考这个帖子：
    http://community.csdn.net/Expert/topic/5490/5490876.xml?temp=.6335565
      

  3.   

    不好意思
    再打搅大家一下
    document.onclick=function(){   
      var obj=event.srcElement?event.srcElement:event.target;
      if(obj.id!="select_icon")
      document.getElementById("TopSearch").style.display="block";  
     } 为什么在firefox下不起作用啊?select_icon是我的图片的id,TopSearch是我要显示和隐藏的div谢谢
      

  4.   

    document.onclick=function()加个event就可以了
    document.onclick=function(event)哎......