Javascript:鼠标移到缩略图上，在第8个表条目之后，较大的图像不工作

我的任务是扩展投资组合页面，但是当我复制和粘贴相同的代码来创建/复制页面上的更多表时，javascript鼠标悬停缩略图不再超出第8个条目。(见链接中的设计项目9)。但是，我可以在第8个条目中放置相同的图像和缩略图，并且效果很好。

链接:http://petrodesignbuild.com/portfoliotest0811.php

`<table cellpadding="0" cellspacing="5" width="764" align="center" class="gallery">
          <tr>
            <td valign="top">
              <p><span class="inttxt"><b>Design Project 9</b></span><br /> Place cursor over photo to view larger</p>
            </td>
            <td align="center" valign="middle">&nbsp;</td>
          </tr>
          <tr>
            <td width="350" align="left" valign="top" style="border-right:solid 1px #d6d6d6 ">
              <div id="gallery">
                <h3>Before </h3><br />
                <img src="images/thumbs/arlington_before1_thumb.jpg" alt="" width="94" height="61" onmouseover="swap('arlington_before1', 'large9')" /><img src="images/thumbs/arlington_before2_thumb.jpg"
                  alt="" width="94" height="61" onmouseover="swap('arlington_before2.jpg', 'large9')" /><img src="images/thumbs/arlington_before3_thumb.jpg" alt=""
                  width="94" height="61" onmouseover="swap('arlington_before3.jpg', 'large9')" /><br />
                <h3>After</h3><br />
                <img src="images/thumbs/arlington_after1_thumb.jpg" alt="" width="94" height="61" onmouseover="swap('arlington_after1.jpg', 'large9')" /><img src="images/thumbs/arlington_after2_thumb.jpg"
                  alt="" width="94" height="61" onmouseover="swap('arlington_after2.jpg', 'large9')" /><img src="images/thumbs/arlington_after3_thumb.jpg" alt=""
                  width="94" height="61" onmouseover="swap('arlington_after3.jpg', 'large9')" /></p>
                <p>A small backyard with a <em>staircase
                          to nowhere</em> was transformed into a true outdoor room with the use of creative masonry and stonework design; This &ldquo;room&rdquo; now has water features including a fountain and a spa, and an outdoor fireplace that all
                  merge seamlessly with the use of elegant curves.
                  <ul>
                    <li><a href="md-services.php"> Custom Stone &amp; Masonry</a></li>
                    <li><a href="wpps-services.php">Pools, Spas &amp;  Garden
                              Ponds
                            </a></li>
                    <li><a href="ld-services.php">Lighting Design</a></li>
                  </ul>
                </p>
              </div>
            </td>
            <td width="397" align="left" valign="top" style="padding:32px 0px 0px 10px;"><img src="images/gallery/arlington_after1.jpg" name="large9" width="363" height="363" id="large2" /> </td>
          </tr>
          <tr>
          </tr>
        </table>
        <p align="right" style="padding-right: 20px"> <a href="#top">back to top</a> </p>
        <center>
          <hr noshade="noshade" class="b">
        </center>`

Javascript:

function swap(xSrc,xName) {
	var image = "images/gallery/" + xSrc.toString();
	document.getElementById(xName).src = image;
	document.getElementById('gallerytxt').innerHTML = xName;
	
	return false;