鼠标悬浮图片显示原图 移出鼠标后原图消失 js

这篇博客介绍了如何使用JavaScript实现鼠标悬停在链接上时显示大图,移出鼠标后大图消失的功能。通过onmouseover和onmouseout事件,结合创建新的img元素以及改变元素的visibility属性,实现了动态显示和隐藏原图的效果。
摘要由CSDN通过智能技术生成


 <script language=JavaScript>
        function mouseOutPic() //当鼠标移出时,隐藏原图 
        {
            if (window.event.toElement.id != "img000") bigPic.style.visibility = "hidden";
            //如果鼠标不在img000上的话,将这个区域隐藏 
        }
        function mouseOverPic(imgSrc) //当鼠标移上小图时,显示原图 
        {
            var seeBig = document.getElementById("bigPic"); //得到将要显示原图区域的div element 
            var newImg = document.createElement("img"); //新建一个img element,将原图的src赋给这个element 
            newImg = "<img src=\'" + imgSrc + "\'/>"; //注意这里,是为整个element赋值,我在这个小问题上还花了挺多时间 
            seeBig.innerHTML = newImg; //将原图赋给要显示的区域 
        } 
    </script> 



 <tr>
                <td

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值