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

hsl2011 2011-06-27 12:26:26

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

...全文

200 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

kyzy_yy_pm 2011-06-27

打赏
举报

灬上海爽爷 2011-06-27

打赏
举报

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

挨踢直男 2011-06-27

打赏
举报

<!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>

hsl2011 2011-06-27

打赏
举报

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

lijianc23 2011-06-27

打赏
举报

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

xuexiaodong2009 2011-06-27

打赏
举报

[Quote=引用 3 楼 tcwsyt 的回复:]

图片所在的是一个DIV，初始为display:none;
鼠标划过文字onmouseover的时候，更改图片所在的DIV的display，设为BLOCK
鼠标移出的时候onmouseout，更改图片所在的DIV的DISPLAY，再设为NONE
[/Quote]不错，原理正确了