呼唤大师系列一:::orums.asp.net中的代码我调试怎么不成功呢，没有产生预期的弹出图片DIV

<html> 
<head> 
<script language="javascript" type="text/javascript"> 
        /**********************************************/ 
        /* EventHandling                                  */ 
        /**********************************************/ 
        var slideId = -1; 
        var isAminating = false; 
        var useSlide = true; 
        var supportedBrowser = isSupported(); 
        function isSupported() 
        { 
            if (typeof document.documentElement.style.maxHeight != "undefined") 
            { 
                return true; 
            } 
            return false; 
        }         function slideIn() 
        { 
            var layer = document.getElementById('theImg'); 
            if(layer.height < 418 ) 
            { 
                layer.height  += 10; 
            } 
            if(layer.width < 559) 
            { 
                layer.width += 100; 
            } // 418 X 559 
            if( (layer.height >= 418 ) && (layer.width >= 559) ) 
            { 
              clearInterval(slideId); 
              isAnimating = false; 
            } 
        } 
        
        function OnImgMouseOver( ev , caller) 
        { 
            if(!supportedBrowser) 
            { 
                return; 
            }             if(!isAminating) 
            { 
            var elm = caller; 
            isAminating = true; 
                var parts = new Array(); 
                var layer = document.getElementById('PopUpLayer'); 
            if( layer  == null ) 
                { 
                WriteLayers(); 
                layer = document.getElementById('PopUpLayer'); 
                } 
                parts = elm.getAttribute('src').split('/'); 
                layer.innerHTML = ' <div style="position: relative;margin:0;padding:0;left: 5px; top: 5px;background-color: black;"> <div style="background-color: silver;"> <div style="border: 1px solid black;position: relative;left: -5px;top: - 5px;"> <img id="theImg" height="0" width="0" src=' + elm.getAttribute('src').replace('92/69',"559/418")  + ' > </div> </div> </div>'; 
                layer.style.top    =  NewfindPosY( elm ) + 'px'; 
                layer.style.left  =  NewfindPosX( elm ) + elm.width + 10 + 'px'; 
                layer.style.visibility = 'visible'; 
                slideId = setInterval(slideIn,1); 
            } 
        }         function OnImgMouseOut(ev) 
        {  
            if(!supportedBrowser) 
            { 
                return; 
            } 
            var layer = document.getElementById('PopUpLayer'); 
            if( layer  == null ) 
            { 
                return; 
            } 
            layer.style.visibility = 'hidden'; 
            clearInterval(slideId); 
            isAminating = false; 
        } 
        /**********************************************/ 
        /* positioning of popuplayer                  */ 
        /**********************************************/         function NewfindPosX(obj) 
        { 
            var curleft = 0; 
            if (obj.offsetParent) 
            { 
                while (obj.offsetParent) 
                { 
                    curleft += obj.offsetLeft 
                    obj = obj.offsetParent; 
                } 
            } 
            else if (obj.x) 
                curleft += obj.x; 
            return curleft; 
        }         function NewfindPosY(obj) 
        { 
            var curtop = 0; 
            if (obj.offsetParent) 
            { 
                while (obj.offsetParent) 
                { 
                    curtop += obj.offsetTop 
                    obj = obj.offsetParent; 
                } 
            } 
            else if (obj.y) 
                curtop += obj.y; 
            return curtop; 
        }         function WriteLayers() 
        { 
          var body = document.getElementsByTagName('body')[0]; 
          var layer = document.createElement('div'); 
          layer.id = 'PopUpLayer'; 
          layer.name = 'PopUpLayer'; 
          layer.style.visibility = 'hidden'; 
          layer.style.position = 'absolute'; 
          body.appendChild(layer); 
        } 
        
        addLoadEvent(initComparison); 
    </script> 
</head> 
<body> 
<div align="center"> 
<img alt="" src="newblue2.gif" style="width:200px;" onmouseover="OnImgMouseOver(event,this);" onmouseout="OnImgMouseOut (event,this);" /> 
</div> 
</body>

解决方案 »

  1.   

    其中我发现的唯一错误就是这一段代码：
    <img id="theImg" height="0" width="0" src=' + elm.getAttribute('src').replace('92/69',"559/418")  + ' >可是其它的没有错啊，不影响生成弹出层啊，怎么啥都没有，只有一幅图啊。
      

  2.   

    晕~！我把
    if(!supportedBrowser) 
                { 
                    return; 
                } 
    去掉，可以调试成功。
      

  3.   

    还有：
    src=' + elm.getAttribute('src').replace('92/69',"559/418")  + '
    这句的功能应该是改变什么呢，如果是改变尺寸 ，那么怎么有92/69这些数字，还有XX/YY这种格式实在不理解，改变尺寸怎么用SRC，应该是STYLE中的width和length才对。这些我懂，就是逐渐改变弹出层大小的动画，只是尺寸最终很大，应该在>号之后的数字做为边界，最终到达边界值就CLEARINTERVAL，取消继续变大效果，可是我改变>边界值，还是不行，还是很大，很难看。还有，关于定位方面的。
    DIV的定位问题：
     function NewfindPosX(obj) 
            { 
                var curleft = 0; 
                if (obj.offsetParent) 
                { 
                    while (obj.offsetParent) ///div弹出层的offsetparent不就是body吗？
                    { 
                        curleft += obj.offsetLeft 
                        obj = obj.offsetParent; 
                    } 
                } 
                else if (obj.x) 
                    curleft += obj.x; 
                return curleft; 
            } 
    定位计算问题，为什么不用其相对于原始图片的OFFSET呢。
      

  4.   


    你的是IE 6 ?replace是摆设吧.
    留意这段代码:
    layer.innerHTML = ' <div style="position: relative;margin:0;padding:0;left: 5px; top: 5px;background-color: black;"> <div style="background-color: silver;"> <div style="border: 1px solid black;position: relative;left: -5px;top: -5px;"> <img id="theImg" height="0" width="0" src=' + elm.getAttribute('src').replace('92/69',"559/418")  + ' > </div> </div> </div>'; 这里设置了最内一层的Image的宽、高,所以只需要改变image的这两个属性，外层的div就会跟着变了。
      

  5.   

    嗯，是IE6
    还有，图片怎么改小？
    弹出层DIV在改小：
    是通过以下实现的：
    function slideIn() 
            { 
                var layer = document.getElementById('theImg'); 
                if(layer.height < 418 ) 
                { 
                    layer.height  += 10; 
                } 
                if(layer.width < 559) 
                { 
                    layer.width += 100; 
                } // 418 X 559 
                if( (layer.height >= 418 ) && (layer.width >= 559) ) 
                { 
                  clearInterval(slideId); 
                  isAnimating = false; 
                } 
            } 
    图片怎么比原始的还大？？？咋回事？？？急啊，，，大师们啊，发发慈悲吧，呜呜~~~
      

  6.   

    javascript我是半桶水哈.
    你把SlideIn里的值调小应该就行了吧。EX:
            function slideIn() 
            { 
                var layer = document.getElementById('theImg'); 
                if(layer.height < 100 ) 
                { 
                    layer.height  += 5; 
                } 
                if(layer.width < 140) 
                { 
                    layer.width += 30; 
                } 
                if( (layer.height >= 418 ) && (layer.width >= 559) )             { 
                  clearInterval(slideId); 
                  isAnimating = false; 
                } 
            } 
      

  7.   

    不好意思，又没仔细看：
    layer.style.top    =  NewfindPosY( elm ) + 'px'; 
    layer.style.left  =  NewfindPosX( elm ) + elm.width + 10 + 'px';
    原来是根据原图的。
    function NewfindPosX(obj) 
            { 
                var curleft = 0; 
                if (obj.offsetParent) 
                { 
                    while (obj.offsetParent)    ///还有offsetParent的有效范围，这个是我的理解上的最大障碍。一般是在HTML的DOM图中的最外层控件，比如DIV，不过有时是BODY，我忘了是怎么回事了，好像是DOM结点如果是相对位移或绝对位移的情况不同而启用BODY作为其OFFSETPARENT。                { 
                        curleft += obj.offsetLeft 
                        obj = obj.offsetParent; 
                    } 
                } 
                else if (obj.x) 
                    curleft += obj.x; 
                return curleft;
             }
      

  8.   

    没用，我试过的，我就是改变这个边界值，没用的。
    还有，想再做的高级些，比如透明效果，就改外层DIV背景色为transparent吧？
    再高级些就是根据鼠标EVENT.SRC.LEFT来定位了吧。随鼠标移动而移动，并限制在原图边框中，这段代码唯一的优点就是
    ：
    有些动画感，可以动态的改变DIV层大小，根据SETTIMEOUT，HEIGHT，WIDTH动态改变。
      

  9.   

    garnett还有吗？
    我刚下载个Microsoft script Debugger，菜单RUN运行怎么是灰的，不可用的，晕倒。
      

  10.   

    偶终于实现了，晕菜，不大顺，调试器也给我开玩笑，现在终于好了。
    <html> 
    <head> 
    <script language="javascript" type="text/javascript"> 
            /**********************************************/ 
            /* EventHandling                                  */ 
            /**********************************************/ 
            var slideId = -1; 
            var isAminating = false; 
            var useSlide = true; 
            var supportedBrowser = isSupported(); 
            function isSupported() 
            { 
                if (typeof document.documentElement.style.maxHeight != "undefined") 
                { 
                    return true; 
                } 
                return false; 
            }         function slideIn() 
            { 
                var layer = document.getElementById('theImg'); 
                if(layer.height < 50 ) 
                { 
                    layer.height  += 2; 
                } 
                if(layer.width < 10) 
                { 
                    layer.width += 100; 
                } // 418 X 559 
                if( (layer.height >= 30 ) && (layer.width >= 60) ) 
                { 
                  clearInterval(slideId); 
                  isAnimating = false; 
                } 
            } 
            
            function OnImgMouseOver( ev , caller) 
            {                 
                var elm = caller; 
                isAminating = true; 
                    var parts = new Array(); 
                    var layer = document.getElementById('PopUpLayer');                 WriteLayers(); 
                    layer = document.getElementById('PopUpLayer'); 
                    
                    parts = elm.getAttribute('src').split('/'); 
                    layer.innerHTML = ' <div style="position: relative;margin:0;padding:0;left: 5px; top: 5px;background-color:black;"> <div style="background-color: silver;"> <div style="border: 1px solid black;position: relative;left: -5px;top: -5px;"> <img id="theImg" height="0" width="0" src=' + elm.getAttribute('src').replace('92/69',"50/10")  + ' > </div> </div></div>'; 
                    layer.style.top    =  NewfindPosY( elm ) + 'px'; 
                    layer.style.left  =  NewfindPosX( elm ) + elm.width + 10 + 'px'; 
                    layer.style.visibility = 'visible'; 
                    slideId = setInterval(slideIn,100); 
              
            }         function OnImgMouseOut(ev) 
            {  
               
                var layer = document.getElementById('PopUpLayer'); 
               
                layer.style.visibility = 'hidden'; 
                clearInterval(slideId); 
                isAminating = false; 
            } 
            /**********************************************/ 
            /* positioning of popuplayer                  */ 
            /**********************************************/         function NewfindPosX(obj) 
            { 
                var curleft = 0; 
                if (obj.offsetParent) 
                { 
                    while (obj.offsetParent) 
                    { 
                        curleft += obj.offsetLeft 
                        obj = obj.offsetParent; 
                    } 
                } 
                else if (obj.x) 
                    curleft += obj.x; 
                return curleft; 
            }         function NewfindPosY(obj) 
            { 
                var curtop = 0; 
                if (obj.offsetParent) 
                { 
                    while (obj.offsetParent) 
                    { 
                        curtop += obj.offsetTop 
                        obj = obj.offsetParent; 
                    } 
                } 
                else if (obj.y) 
                    curtop += obj.y; 
                return curtop; 
            }         function WriteLayers() 
            { 
              var body = document.getElementsByTagName('body')[0]; 
              var layer = document.createElement('div'); 
              layer.id = 'PopUpLayer'; 
              layer.name = 'PopUpLayer'; 
              layer.style.visibility = 'hidden'; 
              layer.style.position = 'absolute'; 
              body.appendChild(layer); 
            } 
            
            addLoadEvent(initComparison); 
        </script> 
    </head> 
    <body>
    <div align="center"> 
    <img alt="" src="newblue2.gif" style="" onmouseover="OnImgMouseOver(event,this);" onmouseout="OnImgMouseOut 
    (event,this);" /> 
    </div>
    </body>
    </html>
    PS：当初我保存为HTML时候，后缀没写，结果都存到.txt文件里了，当然大小没有改变，源文件没变。我真是个大菜鸟啊。结帖。
      

  11.   

    replace的确没看出有啥用。的确是个摆设，还有那种格式真是古怪...
    xx/yy