JS修改圖片路徑

<style>
    *{
        margin: 0;padding: 0;
        list-style: none;
    }
    body{
        background: black;        
    }
    .outer{
        margin: 10px auto;
        border: 1px solid white;
        border-radius: 6px;
        background-color: white;
        width: 200px;
        padding: 8px 6px 6px 8px;
    }
    .outer>ul{
        overflow: hidden;
    }

    .outer>ul>li, .outer>ul>li>img{
        /* 兩個部分設置內容一樣，選擇器寫在一起。 */
        float: left;
        width: 48px;
        height: 48px;
        /* li的寬高不能直接由內部img撐起？ */

        margin: 0 2px 2px 0;
    }
    /* .outer>ul>li>img{
        width: 48px;
        height: 48px;
    } */
    .outer>ul>li:nth-child(1){
        position:relative;
        /* 相對定位，子絕父相，給后面的loading動態圖div使用。 */
    }
    .outer>ul>li:nth-child(1), .outer>ul>li:nth-child(1)>img{
        /* 兩個部分設置內容一樣，選擇器寫在一起。 */
        width: 148px;
        height: 148px;
    }

    .outer>li.first div{
    position:absolute;top:0;left:0;
    width:156px;height:156px;
    display:none;
    opacity:0.5;filter:alpha(opacity=50);
    background:#fff url(img/loading.gif) 50% 50% no-repeat;
    /* 給第一個大圖li加一個空div，添加loading的背景圖。 讓圖片加載時，顯示加載動圖 */
    }
    </style>

    <script>
    window.onload = function()
    {
        // var aImg = document.getElementsByTagName('img');

        // for(let i=0; i<aImg.length; i++)
        // {
        //     aImg[i].onmouseover = function()
        //     {
        //         aImg[0].src = this.src;
        //     };
        // };

        var oImg = document.getElementById("box").getElementsByTagName("img");

        var oDiv = document.getElementsByTagName("div")[0];
        // 給第一個大圖li加一個空div，添加loading的背景圖。 讓圖片加載時，顯示加載動圖。
        for (var i = 1; i < oImg.length; i++)
        {
            oImg[i].onmouseover = function ()
            {                        
                var img = new Image();

                img.src = oImg[0].src = this.src.replace(/small/,"big");
                // replace(); 方法，用於在字符串中用一些字符替換另一些字符。
                // 例如：
                // var str="Visit Microsoft!"
                // document.write(str.replace(/Microsoft/, "W3School"))
                // 輸出：Visit W3School!

                oDiv.style.display = "block";

                img.complete ? oDiv.style.display = "none" : (oImg[0].onload = function() {oDiv.style.display = "none"})
                // complete  通過Image對象的complete 屬性來檢測圖像是否加載完成。
                // onload    當圖像裝載完畢時調用的事件句柄。

                // 所以上面這個三元表達式的意思是：
                // img這個圖片對象是否加載完成？  
                // 加載完成就讓div的display為none。   沒有加載完成，就調用img的onload事件，讓它加載完成，然后運行function 讓div的display為none。
                
                // js Image()對象onload和預加載
                // https://segmentfault.com/a/1190000011020722?utm_source=tag-newest
            }    
        }
    };
    </script>