js问题。。。求解！

我想实现鼠标进入某个小图时，两秒后判断鼠标是否还在该小图上，若在，显示大图。鼠标离开大图时大图消失。
我试着写了个，但这个只能是在页面只有一个小图时可以。因为页面不能有多个相同的id。如果有多个小图呢？该怎么改？<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        var Url = "";
        function mouseMove(ev, divx1, divy1, divx2, divy2) {
            ev = ev || window.event;
            var mousePos = mouseCoords(ev, divx1, divy1, divx2, divy2);            if (mousePos.x > mousePos.divx1 && mousePos.x < mousePos.divx2 && mousePos.y > mousePos.divy1 && mousePos.y < mousePos.divy2) { //在图的范围之内
                if (document.getElementById('insert').childNodes.length < 1) {
                    var div = document.createElement("div");
                    div.innerHTML = "<img src=\"" + Url + "\" style=\"width:870px;height:435px;\" onmouseout=\"del()\" />";
                    //document.body.appendChild(div);
                    document.getElementById('insert').appendChild(div);
                }
            }
            document.onmousemove = function () {
            };
        }
        function mouseCoords(ev, divx1, divy1, divx2, divy2) {
            if (ev.pageX || ev.pageY) {
                return {
                    x: ev.pageX, y: ev.pageY,
                    divx1: div.offsetLeft,   //当前div距离左侧的距离。
                    divy1: div.offsetTop,
                    divx2: div.offsetLeft + div.offsetWidth,  //当前div的最右端 与左侧的距离。
                    divy2: div.offsetTop + div.offsetHeight
                };
            }
            return {
                x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                y: ev.clientY + document.body.scrollTop - document.body.clientTop,
                divx1: div.offsetLeft,   //当前div距离左侧的距离。
                divy1: div.offsetTop,
                divx2: div.offsetLeft + div.offsetWidth,  //当前div的最右端 与左侧的距离。
                divy2: div.offsetTop + div.offsetHeight
            }
        }
        function del() {
            document.getElementById('insert').childNodes[0].removeNode(true);
        }
        function show(ImageUrl) {
            Url = ImageUrl;
            setTimeout(function () {
                document.onmousemove = mouseMove;
            }, 2000);
        }
   </script>
</head>
<body>
    <form id="form1" runat="server">
         <div id="div" style="position:relative;top:15px; left:0px;width:100px;height:50px">
       <a href="ProInfo.aspx?proid=1" target="_blank">
        <img src="0.jpg" alt="" style="width:100px;height:50px" border="0px" onmouseover="show('0.jpg')" />
       </a>
     </div>
     <div id="insert" style="width:870px;height:500px; position:absolute; top:50px; left:10px; z-index:2; text-align:center;"></div>
    </form>
</body>
</html>

解决方案 »

  1.   

    $('#smallPicId').hover(
        function() {
            $(this).delay(2000).attr('src', '大图路径');
        }, function() {
            $(this).attr('src', '小图路径');
        }
    );
      

  2.   


    是不是要加jquery类库呢？加哪个类库？
      

  3.   

    var imgs=document.images;
    for(var i=0;i<imgs.length;i++){
    imgs[i].onmouseover=function(){
    延时显示大图
    大图src=this.src;
    }
    imgs[i].onmouseout=function(){
    取消延时
    }
    }
    试试
      

  4.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="jquery-1.3.2.js" type="text/javascript"></script>
        <script language="javascript" type="text/javascript">
            function bigImage(smallImgUrl,bigImgUrl) {
                $('#smallPicId').hover(
         function () {
             $(this).delay(2000).attr('src', smallImgUrl);
         }, function () {
             $(this).attr('src', bigImgUrl);
         }
     );
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <div style="width:60px; height:69px;" ><img src="zh_zb1.png" alt="" width="60px" height="69px" onmouseover="bigImage('zh_zb1.png','zh_zb1.png')" /></div>
        </div>
        </form>
    </body>
    </html>
    没效果
      

  5.   

    上面的代码忘了加   id="smallPicId"  加了之后出现“对象不支持"delay"属性或方法”
      

  6.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="jquery-1.3.2.js" type="text/javascript"></script>
        <script language="javascript" type="text/javascript">
            $(function() {
               $('#smallPicId').hover(
         function () {
             $(this).delay(2000).attr('src', 'zh_zb2.png');
         }, function () {
             $(this).attr('src', 'zh_zb1.png');
         }
     );
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <div style="width:60px; height:69px;" ><img id='smallPicId' src="zh_zb1.png" alt="" width="60px" height="69px" /></div>
        </div>
        </form>
    </body>
    </html>
      

  7.   

    $("#smallPicID").hover{
         function(){
            $(this).delay(2000).attr("src","大图路径");
         },function(){
            $(this).attr("src","小图路径");
         }
    }
      

  8.   

    上面的代码忘了加   id="smallPicId" 
    加了之后出现“不支持对象delay属性或方法”
      

  9.   

    这样吧<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
    <script language="javascript" type="text/javascript">
            $(function() {
               $('#smallPicId').hover(
         function () {
     function fns() {
     $('#smallPicId').attr('src', 'zh_zb2.png');
     }
     var timer = setTimeout(fns, 2000);
             
         }, function () {
     timer = null;
             $(this).attr('src', 'zh_zb1.png');
         }
     );
            });
        </script>
    </head><body>
    <form id="form1" runat="server">
        <div>
        <div style="width:60px; height:69px;" ><img id='smallPicId' src="1.jpg" alt="" width="60px" height="69px" /></div>
        </div>
        </form>
    </body>
    </html>
      

  10.   

    错了，这样<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
    <script language="javascript" type="text/javascript">
            $(function() {
               $('#smallPicId').hover(
         function () {
     function fns() {
     $('#smallPicId').attr('src', 'zh_zb2.png');
     }
     var timer = setTimeout(fns, 2000);
             
         }, function () {
     timer = null;
             $(this).attr('src', 'zh_zb1.png');
         }
     );
            });
        </script>
    </head><body>
    <form id="form1" runat="server">
        <div>
        <div style="width:60px; height:69px;" ><img id='smallPicId' src="zh_zb1.png" alt="" width="60px" height="69px" /></div>
        </div>
        </form>
    </body>
    </html>