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

用 CSS 的 :hover 试试看呢？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

CSS我知道的只是能控制背景图片的地址，能控制<IMG>的SRC属性？？
<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>
<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>
DW8里行为－>设置导航栏图像
<img src="1.jpg"/ onmouseover="showImg2()" onmouseout="showImg1()">function showImg1(){
  event.srcElement.Src="1.jpg";
}
function showImg2(){
  event.scrElement.Src="2.jpg";
}在JS里面Src的第一个字母要大写
写两个方法：onmouseon,onmouseout，
前者方法改图，后者把图换回来~~~~·
10楼正解！
10楼正解！不过最好把firefox的兼容性也做了。
使用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>
<script>
function photo(str){
    if(str=='n1'){
document.getElementById("t").src="02.gif";
    }else{
document.getElementById("t").src="01.gif";
    }
}
</script>
<BODY>
  <img id="t" value="1" src="01.gif" onMouseOver="photo('n1')" onMouseOut="photo()"/>
</BODY>