这个怎么办！

Question

   <script type="text/javascript" >
        function ia(){
            var hu = document.getElementById("tr1");
            var du = hu.getElementsByTagName("td");//
             for (var i = 0; i < du.length;i++ ) {
                 var ds = du[i];
                 ds.onmouseover = su;    
                 }
            }
    
         function su() {
             var a = document.getElementById("tr1").getElementsByTagName("td");
             for (var k = 0; k < a.length;k++ ) {
                 var su = "url(images/" + k + ".jpg)";
                 document.getElementById("sa").style.backgroundImage = su;
             }
         }
    </script>
   <table id ="table1" runat="server" border="0" cellpadding ="0" cellspacing ="0">
    <tr id="tr1">
    <td style="background-color:#FC0000;">1</td>
    <td style="background-color:#0958A3;">2</td>
    <td style="background-color:#FF42FF;">3</td>
    <td style="background-color:#F4469B;">4</td>
    <td style="background-color:#D0BA33;">5</td>
    <td style="background-color:#000000;">6</td>
    <td style="background-color:#107E7F;">7</td>
    <td style="background-color:#7BC120;">8</td>
    <td style="background-color:#545456;">9</td>
    <td style="background-color:#FD8000;">10</td>
    </tr>
    <tr>
    <td colspan ="10" id="sa"></td>
    </tr>
    </table>    每当鼠标移到上面tr每个单元格的时候，下面的tr单元格就变一幅图片，   可是我这样写了后，当鼠标移上去的时候就   下面的tr就变成了最后幅图片，
 
   这个怎么控制啊！！！

Answer 1

你想实现的是这个效果吗？
function ia() {
    var td = document.getElementById('tr1').getElementsByTagName('td');
    for (var i = 0; i < td.length; i ++) {
        td[i].onmouseover = function() {
            document.getElementById('sa').style.backgroundImage = 'url(images/' + (this.cellIndex + 1) + '.jpg)';
        }
    }
}