关于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";