怎么使鼠标经过文字时，根据鼠标的位置，弹出一副图片？

怎么使鼠标经过文字时，根据鼠标的位置，弹出一副图片？鼠标从文字上移开时，图片自动消失？

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
        <title>New Document </title>
    </head>
    <body>
        <div>
            <ul id="ul">
                <a index="link1">111111</a> <a index="link2">222222</a> <a index="link3">333333</a>
            </ul>
            <ul id="links" style="display:none">
                <li id="link1"><img src="http://avatar.profile.csdn.net/6/3/9/2_hsl2011.jpg"> </li>
                <li id="link2"><img src="http://avatar.profile.csdn.net/5/A/8/2_rayyu1989.jpg"> </li>
                <li id="link3"><img src="http://avatar.profile.csdn.net/6/3/9/2_hsl2011.jpg">  </li>
            </ul>
        </div>
        <style type="text/css">
            .tip
            {
                position: absolute;
                height: 100px;
                width: 100px;
                border: 1px solid #000;
            }
        </style>    <script type="text/javascript">var list = document.getElementsByTagName("a");
    var tip ;
    //var old;
    for(var i = 0 ; i < list.length; i ++)
    {
        list[i].onmouseover = function(e)
        {
           //  if(old) old.parentNode.removeChild(old)
             e = e || window.event;
             var x = this.offsetLeft+10
             var y = this.offsetTop+20
             //old = tip = document.createElement("div");
             tip = document.createElement("div");
             tip.className = "tip"
             tip.style.left = x+"px";
             tip.style.top = y+"px";
             var id = this.getAttribute("index");
             var html = document.getElementById(id).innerHTML;
             tip.innerHTML = html
             document.body.appendChild(tip);
             return false;
        }
        list[i].onmouseout=function()
        {
           tip.parentNode.removeChild(tip)
        }
    }
        </script></body>
    </html>
      

  2.   

    图片所在的是一个DIV，初始为display:none;
    鼠标划过文字onmouseover的时候，更改图片所在的DIV的display，设为BLOCK
    鼠标移出的时候onmouseout，更改图片所在的DIV的DISPLAY，再设为NONE
      

  3.   

    <script>
    function show(){
    //当然了，你也可以在下面的操作中进行src赋值操作
    if(document.getElementById("img").style.display == "none"){
    document.getElementById("img").style.display = "";
    }else{
    document.getElementById("img").style.display = "none";
    }
    }
    </script>
    <img id="img" src="http://mydir.com/0.gif" style="display: none">
    <img src="http://mydir.com/haohaha.jpg" border=0 alt="haohaha" usemap="#test">
    <map name="test">
    <area shape="rect" coords="0,0,82,126" href="javascript: void(0)" onmouseover="show()">
    </map>
      

  4.   

    先获取鼠标的 坐标,, 然后 JS 生成一个DIV或者直接图片也可以 设置 postion:absolute 再设置相应的 top left 其实就是鼠标现在的位置 然后 appendTo 就OK了