急！！怎么实现鼠标移动两张图片交换

例如:当前页面的图片是小图片，我鼠标移动上去则变成第二张图片（大图），在原有小图片的位置上显示，只需要把小图片盖住就可以了，第二张图片最好可以用层，层是浮动的这样不会把周围的布局挤散，麻烦各位大哥们帮帮忙着急啊！！！

解决方案 »

  1.   

    以前写的，支持 IE6 和 FF支持 IE6 和 FF
    [code=HTML]
    <script>
    var eventX;
    var eventY;
    var flag1 = false;// 光标是否在原图上
    var flag2 = false;// 是否在全图上
    document.onmousemove=setPoint;
    function setPoint(e){
    e = e ? e : event;
    eventX = e.clientX ? e.clientX : e.x;
    eventY = e.clientY ? e.clientY : e.y;
    eventY += document.body.scrollTop || document.documentElement.scrollTop;
    }function showFullImg(imgSrc,aHref){
    flag1 = true;
    setTimeout("showPic('" + imgSrc + "','" + aHref + "')",1000);
    }function showPic(imgSrc,aHref){
    document.getElementById("aaa").href = aHref;
    document.getElementById("fullImg").src = imgSrc;
    document.getElementById("fullImg").style.top = eventY + "px";
    document.getElementById("fullImg").style.left = eventX + "px";
    document.getElementById("fullImg").style.display = "block";
    }function hidePic(){
    if(!flag1 && !flag2){
    document.getElementById("fullImg").style.display = "none";
    }
    }function hideFullImg(){
    setTimeout("hidePic()",300);
    }
    </script>
    <a id="aaa" href="" target="_blank">
    <img id="fullImg" style="display:none;width:150px;position:absolute;" onmouseover="flag2=true;" onmouseout="flag2=false;hideFullImg()"/>
    </a>
    <img src="http://i3.sinaimg.cn/home/deco/2008/0325/sinahome_Logo.gif" style="overflow:hidden;width:100px;" onmouseover="showFullImg(this.src,'http://www.sina.com.cn/')" onmouseout="flag1=false;hideFullImg()"/>
    <img src="http://img1.cache.netease.com/cnews/netease/logo.gif" style="overflow:hidden;width:100px;" onmouseover="showFullImg(this.src,'http://www.163.com/')" onmouseout="flag1=false;hideFullImg()"/>
    <br/>
    下面还有一个<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><img src="http://google.cn/intl/zh-CN/images/logo_cn.gif" style="overflow:hidden;width:100px;" onmouseover="showFullImg(this.src,'http://www.google.cn/')" onmouseout="flag1=false;hideFullImg()"/>[/code]
      

  2.   


    <html>
    <head>
    <title>无标题文档</title>
    <script language="javascript">
    function showDIV()
    {
    var div = document.getElementById("div");
    div.style.display = "block";
    var img = document.img; div.style.posTop = img.style.top;
    div.style.posLeft = img.style.left;
    }
    </script><body>
        <img src="小图片路径" name="img" onmousemove="showDIV()" />
        <div id="div" style="display:none;position:absolute;" >
            <img src="大图片路径" onmouseleave="document.getElementById('div').style.display='none'" />
        </div>
    </body>
    </html>
      

  3.   

    存放大图片的那个div可以放在页面的最下方，任何容器之外，需要时才显示出来，不会影响页面布局的