求一个通过鼠标事件动态显示图片的函数！无奈5个小时了！！

fredtaylor 2008-11-09 03:45:25

也就是一个导航，按钮是在图片上做了热点。我想加个功能，当鼠标移到某个按钮图片上的时候，该图片变换成另外一个图片，鼠标移走后，再恢复原来的图片。。

功能很简单，但试了几个小时都失败。。求各位给个片段。

看来还是要恶补JS了！

...全文

176 18 打赏收藏转发到动态举报

写回复

用AI写文章

18 条回复

切换为时间正序

请发表友善的回复…

发表回复

qn94188765 2008-11-11

打赏
举报

wguorun 2008-11-11

打赏
举报

使用JavaScript实现鼠标移入移出小图片，显示隐藏大图片，离开图片时显示小图片，并且有图片位置的计算。
http://wguorun.blog.163.com/blog/static/1630623820088434437175/
希望对楼主有帮助！

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type="text/css">

        .image{ width:150px; height:100px;}

    </style>

    <script type="text/javascript">

        function $(name) {

            return document.getElementById(name);

        }

        var isShowBigImage = false;

        function SetShowBigImage(isShow) {

            isShowBigImage = isShow;

        }

        function ShowImage(obj) {

            var divObj = "bigImageShow";

            var ttop = obj.offsetTop;       //控件的定位点高(离上一控件的Y)

            var tleft = obj.offsetLeft;     //控件的定位点宽(离上一控件的X)

            var thei = obj.clientHeight;    //控件本身的高

            var twid = obj.clientWidth;     //控件本身的宽

            $(divObj).style.top = ttop;//设置显示大图片的位置

            $(divObj).style.left = tleft;

            $(divObj).innerHTML = "<img src='" + obj.src + "' alt='' align='absmiddle' width='380' height='240' />";

            SetShowBigImage(true);

            $(divObj).style.display = 'block';

        }        

        function HideImage() {

            SetShowBigImage(false);

            setTimeout(ClearImageA, 1000);

        }

        function ClearImageA() {

            if (!isShowBigImage)

                $('bigImageShow').style.display = 'none';

        }

    </script>

</head>

<body>

    <div>

    <div id="bigImageShow" onmousemove="SetShowBigImage(true);" onmouseout="HideImage();" style="z-index:20;position:absolute;display:none;"></div>

    <p style="text-align:center">

    <img src="http://img2.cache.netease.com/auto/2008/9/4/2008090409452981bc1.jpg" class="image" alt="" onmouseover="ShowImage(this);" onmouseout="HideImage();" />

    <img src="http://img2.cache.netease.com/auto/2008/9/4/20080904094401f3f24.jpg" class="image" alt="" onmouseover="ShowImage(this);" onmouseout="HideImage();" />

    </p>

    <img src="http://img2.cache.netease.com/auto/2008/9/4/20080904094516e2da4.jpg" class="image" alt="" onmouseover="ShowImage(this);" onmouseout="HideImage();" />

    </div></body>

</html>

ked 2008-11-10

打赏
举报

dw 动动鼠标就搞定。。

chenjianwei2046 2008-11-10

打赏
举报

10楼正解！不过最好把firefox的兼容性也做了。

xsnzp 2008-11-10

打赏
举报

10楼正解！

lengssmm 2008-11-10

打赏
举报

10楼的正解

jol_boy 2008-11-10

打赏
举报

写两个方法：onmouseon,onmouseout，
前者方法改图，后者把图换回来~~~~·
10楼正解！

铁樵 2008-11-09

打赏
举报

第一句里的"/"放到最后"/>"

铁樵 2008-11-09

打赏
举报

<img src="1.jpg"/ onmouseover="showImg2()" onmouseout="showImg1()">

function showImg1(){
event.srcElement.Src="1.jpg";
}
function showImg2(){
event.scrElement.Src="2.jpg";
}

在JS里面Src的第一个字母要大写

sy_binbin 2008-11-09

打赏
举报

DW8里

行为－>设置导航栏图像

sy_binbin 2008-11-09

打赏
举报

dw好像就有这个功能

yqh2009 2008-11-09

打赏
举报

网上大把了，LZ有问题就搜搜吧

wtcsy 2008-11-09

打赏
举报

<img src="http://img1.qq.com/news/pics/13346/13346045.jpg" onmouseover="show(this)" onmouseout="show(this)">

<script>

function show(e){

e.src=(e.src=="http://img1.qq.com/news/pics/13346/13346045.jpg"?"http://img1.qq.com/news/pics/13346/13346078.jpg":"http://img1.qq.com/news/pics/13346/13346045.jpg")

}

</script>

fredtaylor 2008-11-09

打赏
举报

不是背景图啊，是<IMG>

wtcsy 2008-11-09

打赏
举报

<style type="text/css">

.c1{

background-image:url(http://img1.qq.com/news/pics/13346/13346078.jpg);

width:22px;

height:24px;

}

a.c1:hover{

background-image:url(http://img1.qq.com/news/pics/13346/13346045.jpg);

width:22px;

height:24px;

}

</style>

<a href="#" class="c1"><div style="width:310px; height:210px;"></a>