您现在的位置是:主页 > 建站知识 > 如何实现鼠标移动到文字显示图片(代码)

如何实现鼠标移动到文字显示图片(代码)

时间:2017-08-03 17:23  来源:爱分享8  阅读次数: 复制分享 我要评论


      刚开始建站的时候,有些童鞋希望写一段文字,当鼠标经过这段文字时,显示一张图片,鼠标离开时,显示图片取消。就像小8页面底部“关注微信”的功能一样。那么如何实现这一功能呢?小8给大家分享一段代码,此代码非常实用,直接放到HTML中即可实现。代码如下:

<script language="javascript">
    function show_img()   //  显示图片函数,鼠标移到链接触发
    {
        document.getElementById("img_1").style.display = "block";
        }
    function hide_img()   //    隐藏图片函数,鼠标离开链接触发
    {
        document.getElementById("img_1").style.display = "none";
        }
</script>
<a href="点击文字后跳转的链接地址" onMouseOver="show_img()" onMouseOut="hide_img()">你要设置的文字</a>
<img id="img_1" src="要显示的图片地址" style="display:none"/>

上面代码中,童鞋们直接放到HTML中,修改绿色字体部分即可,橘色字体可不用理会。

实现的效果如下图:
 



 
相关资讯