JavaScript显示图片问题

一个table，4行2列，左侧为4行，右侧合并为1行1列。
鼠标悬停在第1列1行中的一个图片，然后在第2列中显示另一个设定好的图片，然后再悬停第1列2行的图片，然后在第2列中显示。怎么做？用JavaScript怎么做？ 

解决方案 »

  1.   


    <!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>
      <title> new document </title>
      <style type="text/css">
      table { border: 3px solid #BFBFBF;
    border-collapse: collapse;
    padding:0px;
    margin: 0px;
      }  td {
    border: 3px solid #BFBFBF;  }
      img {
    width:134px;  }  #oshow {
    width: 300px;

      }  #showImg {
    width:300px;
    height: 400px;
      }
      </style>
      <script type="text/javascript">
      <!--
    function showImg(oTd){
    document.getElementById("oshow").firstChild.src = oTd.firstChild.src;
    }
      //-->
      </script>
     </head> <body>
      <table>
    <tr>
    <td onmouseover = "showImg(this)"><img src="http://tbn0.google.cn/images?q=tbn:un4M5zABTAzLlM:"/></td>
    <td rowspan="4" id="oshow"><img id="showImg" src="http://tbn0.google.cn/images?q=tbn:un4M5zABTAzLlM:"></td>
    </tr>
    <tr>
    <td onmouseover = "showImg(this)"><img src="http://tbn0.google.cn/images?q=tbn:qjuDn5e97wNQGM:"/></td> </tr>
    <tr>
    <td onmouseover = "showImg(this)"><img src="http://tbn0.google.cn/images?q=tbn:lthIA6WGBSR_eM:"/></td> </tr>
    <tr>
    <td onmouseover = "showImg(this)"><img src="http://tbn0.google.cn/images?q=tbn:vbkQPFYOduuMYM:"/></td> </tr>
      </table>
     </body>
    </html>
      

  2.   


    <body>
    <script language="javascript">
    <!--
    var img
    onload=function(){img=document.getElementById("img")}
    //-->
    </script>
    <table border="1" width="400" id="table1">
    <tr>
    <td width="80" height="50" onmouseover="img.src='http://desk.blueidea.com/desk/XP/225/xpbz0091.jpg'"><img height=50 width=80 src='http://desk.blueidea.com/desk/XP/225/xpbz0091.jpg'></td>
    <td rowspan="4"><img id=img height=200 width=300 src='http://desk.blueidea.com/desk/XP/225/xpbz0091.jpg'></td>
    </tr>
    <tr>
    <td width="80" height="50" onmouseover="img.src='http://desk.blueidea.com/desk/XP/225/xpbz0092.jpg'"><img height=50 width=80 src='http://desk.blueidea.com/desk/XP/225/xpbz0092.jpg'></td>
    </tr>
    <tr>
    <td width="80" height="50" onmouseover="img.src='http://desk.blueidea.com/desk/XP/225/xpbz0093.jpg'"><img height=50 width=80 src='http://desk.blueidea.com/desk/XP/225/xpbz0093.jpg'></td>
    </tr>
    <tr>
    <td width="80" height="50" onmouseover="img.src='http://desk.blueidea.com/desk/XP/225/xpbz0094.jpg'"><img height=50 width=80 src='http://desk.blueidea.com/desk/XP/225/xpbz0094.jpg'></td>
    </tr>
    </table></body>
      

  3.   

    or:<body>
    <script language="javascript">
    <!--
    var img
    onload=function(){img=document.getElementById("img")}
    //-->
    </script>
    <table border="1" width="400" id="table1">
    <tr>
    <td width="80" height="50"><img onmouseover="img.src=this.bigsrc" height=50 width=80 src='http://desk.blueidea.com/desk/XP/225/xpbz0091.jpg' bigsrc='http://desk.blueidea.com/desk/XP/225/xpbz0091.jpg'></td>
    <td rowspan="4"><img id=img height=200 width=300 src='http://desk.blueidea.com/desk/XP/225/xpbz0091.jpg'></td>
    </tr>
    <tr>
    <td width="80" height="50"><img onmouseover="img.src=this.bigsrc" height=50 width=80 src='http://desk.blueidea.com/desk/XP/225/xpbz0092.jpg' bigsrc='http://desk.blueidea.com/desk/XP/225/xpbz0092.jpg'></td>
    </tr>
    <tr>
    <td width="80" height="50"><img onmouseover="img.src=this.bigsrc" height=50 width=80 src='http://desk.blueidea.com/desk/XP/225/xpbz0093.jpg' bigsrc='http://desk.blueidea.com/desk/XP/225/xpbz0093.jpg'></td>
    </tr>
    <tr>
    <td width="80" height="50"><img onmouseover="img.src=this.bigsrc" height=50 width=80 src='http://desk.blueidea.com/desk/XP/225/xpbz0094.jpg' bigsrc='http://desk.blueidea.com/desk/XP/225/xpbz0094.jpg'></td>
    </tr>
    </table></body>
      

  4.   

    <script language="javascript">
    function show_detail(img)
    {
      var table = document.getElementById("table1");
      var img2 = table.rows[0].cells[1].getElementsByTagName("img")[0];
      if(!img2)
      {
        img2 = document.createElement("img");
        table.rows[0].cells[1].appendChild(img2);
      }
      img2.src = img.getAttribute("detail");
    }
    </script>
    <table border="1" width="400" id="table1">
        <tr>
            <td><img src="http://img02.taobaocdn.com/bao/uploaded/i2/2c1/780/T1gNBaXft6DAzvR0jA.jpg_sum.jpg" detail="http://img02.taobaocdn.com/bao/uploaded/i2/2c1/780/T1gNBaXft6DAzvR0jA.jpg" onmouseover="show_detail(this)"/></td>
            <td rowspan="4"></td>
        </tr>
        <tr>
            <td><img src="http://img04.taobaocdn.com/bao/uploaded/i4/T1HUNbXaNlkwD1upjX.jpg_sum.jpg" detail="http://img04.taobaocdn.com/bao/uploaded/i4/T1HUNbXaNlkwD1upjX.jpg" onmouseover="show_detail(this)"/></td>
        </tr>
        <tr>
            <td><img src="http://img02.taobaocdn.com/bao/uploaded/i2/T19lxbXoVr9Mz1upjX.jpg_sum.jpg" detail="http://img02.taobaocdn.com/bao/uploaded/i2/T19lxbXoVr9Mz1upjX.jpg" onmouseover="show_detail(this)"/></td>
        </tr>
        <tr>
            <td><img src="http://img02.taobaocdn.com/bao/uploaded/i2/2c1/780/T1gNBaXft6DAzvR0jA.jpg_sum.jpg" detail="http://img02.taobaocdn.com/bao/uploaded/i2/2c1/780/T1gNBaXft6DAzvR0jA.jpg" onmouseover="show_detail(this)"/></td>
        </tr>
    </table>
    代码在IE6和Firefox下测试通过
      

  5.   


    <script language="javascript">
    function show_detail(img)
    {
      var table = document.getElementById("table1");
      var img2 = table.rows[0].cells[1].getElementsByTagName("img")[0];
      if(!img2)
      {
        img2 = document.createElement("img");
        table.rows[0].cells[1].appendChild(img2);
      }
      img2.src = img.getAttribute("detail");
    }
    </script>
    <table border="1" width="400" id="table1">
        <tr>
            <td><img src="http://img02.taobaocdn.com/bao/uploaded/i2/2c1/780/T1gNBaXft6DAzvR0jA.jpg_sum.jpg" detail="http://img02.taobaocdn.com/bao/uploaded/i2/2c1/780/T1gNBaXft6DAzvR0jA.jpg" onmouseover="show_detail(this)"/></td>
            <td rowspan="4"></td>
        </tr>
        <tr>
            <td><img src="http://img04.taobaocdn.com/bao/uploaded/i4/T1HUNbXaNlkwD1upjX.jpg_sum.jpg" detail="http://img04.taobaocdn.com/bao/uploaded/i4/T1HUNbXaNlkwD1upjX.jpg" onmouseover="show_detail(this)"/></td>
        </tr>
        <tr>
            <td><img src="http://img02.taobaocdn.com/bao/uploaded/i2/T19lxbXoVr9Mz1upjX.jpg_sum.jpg" detail="http://img02.taobaocdn.com/bao/uploaded/i2/T19lxbXoVr9Mz1upjX.jpg" onmouseover="show_detail(this)"/></td>
        </tr>
        <tr>
            <td><img src="http://img02.taobaocdn.com/bao/uploaded/i2/2c1/780/T1gNBaXft6DAzvR0jA.jpg_sum.jpg" detail="http://img02.taobaocdn.com/bao/uploaded/i2/2c1/780/T1gNBaXft6DAzvR0jA.jpg" onmouseover="show_detail(this)"/></td>
        </tr>
    </table>
    是不是改用html格式？
      

  6.   

    #4:
    <img onmouseover="img.src=this.bigsrc" height=50 width=80 src='http://desk.blueidea.com/desk/XP/225/xpbz0091.jpg' bigsrc='http://desk.blueidea.com/desk/XP/225/xpbz0091.jpg'>
    改写bigsrc