关于js的图标跟着鼠标移动的问题

  <script type="text/javascript">
       var f1 = function () {

            var d1 = document.getElementsByTagName("a");
        

            for (var i = 0; i < d1.length; i++) {
                d1[i].onmouseover = f2;
                d1[i].onmouseout = function () {
                    var dd1 = document.getElementById("d11");
                    dd1.style.display = "none";
                }
            }
        }
        var f2 = function () {

            var dd1 = document.getElementById("d11");
        
            dd1.style.display = "";
            dd1.style.position = "absolute";
            dd1.style.top = window.event.clientY;
            dd1.style.left = window.event.clientX;
         
        }

    <a id="a1" href="http://www.baidu.com">百度</a>
    <br />
    <a href="http://www.163.com">163</a>
    <br />
    <a href="http://www.hao123.com">hao123</a>
    <br />
    <a href="http://www.hao123.com">haohao123</a>
    <br />
    <div id="d11" style = "display:none">
        <img src="imgs/1.png" width="100px" height="100px" />
    </div>

其实我的意图很简单 就是当鼠标放在标签上的时候，显示图片在鼠标位置，我现在发现用IE还是谷歌都是显示在div原来的位置没有跟着鼠标走 为什么。。。。。请高手指点
[解决办法]
dd1.style.display = "inline";