I have a bar containing thumbnails below a main image that when moused over have the photo appear large above. I'm using javascript swap layers code and it works to swap as you rollover the thumbs however, when you roll over any thumb other than the first “main” image it displays both images large one above the other. Can anyone see the problem and suggest a fix?

You can view a working copy of the code here:
http://www.palisadejewelers.com/Mobi...ate/46294.html

HTML Code:
<!-- 6/19/2012/ PRODUCT CONTENT 6/19/2012/ -->
              <table class="table_product_area" cellpadding="0px" cellspacing="0px">
                <tbody>
                  <tr>
                    <td><center>
                        <br>
                        <table border="0" cellpadding="0px" cellspacing="0px" width="710px">
                          <tbody>
                            <tr>
                              <td valign="top" width="400px">
<!-- 6/19/2012/ PRODUCT IMAGES ROLLOVERS 6/19/2012/ -->
                                <center>
                                  <table border="0" cellpadding="0" cellspacing="0" height="400" width="400">
                                    <tbody>
                                      <tr>
                                        <td align="center"><div style="visibility: visible; margin: 0pt; display: none;" id="lyr0"> <a href="http://www.palisadejewelers.com/eBay/46294/images/46294-5.jpg" target="_blank"><img src="http://www.palisadejewelers.com/eBay/46294/images/46294-5.jpg" alt="" border="0"></a> </div>
                                          <div style="display:none; margin: 0pt;" id="lyr1"> <a href="http://www.palisadejewelers.com/eBay/46294/images/46294-4.jpg" target="_blank"><img alt="" src="http://www.palisadejewelers.com/eBay/46294/images/46294-4.jpg" border="0"></a> </div>
                                          <div style="display:none; margin: 0pt;" id="lyr2"> <a href="http://www.palisadejewelers.com/eBay/46294/images/46294-3.jpg" target="_blank"><img alt="" src="http://www.palisadejewelers.com/eBay/46294/images/46294-3.jpg" border="0"></a> </div>
                                          <div style="display:none; margin: 0pt;" id="lyr3"> <a href="http://www.palisadejewelers.com/eBay/46294/images/46294-2.jpg" target="_blank"><img alt="" src="http://www.palisadejewelers.com/eBay/46294/images/46294-2.jpg" border="0"></a> </div>
                                          <div style="display:block; margin: 0pt;" id="lyr4"> <a href="http://www.palisadejewelers.com/eBay/46294/images/46294-1.jpg" target="_blank"><img alt="" src="http://www.palisadejewelers.com/eBay/46294/images/46294-1.jpg" border="0"></a> </div></td>
                                      </tr>
                                    </tbody>
                                  </table>
                                  <table border="0" cellpadding="0" cellspacing="0">
                                    <tbody>
                                      <tr>
                                        <td><a href="http://www.palisadejewelers.com/eBay/46294/images/80/46294-5.jpg" target="_blank" onMouseOver="swapLayers2('lyr0');"><img alt="" src="http://www.palisadejewelers.com/eBay/46294/images/80/46294-5.jpg" border="0"></a></td>
                                        <td><a href="http://www.palisadejewelers.com/eBay/46294/images/80/46294-4.jpg" target="_blank" onMouseOver="swapLayers2('lyr1');"><img alt="" src="http://www.palisadejewelers.com/eBay/46294/images/80/46294-4.jpg" border="0"></a></td>
                                        <td><a href="http://www.palisadejewelers.com/eBay/46294/images/80/46294-3.jpg" target="_blank" onMouseOver="swapLayers2('lyr2');"><img alt="" src="http://www.palisadejewelers.com/eBay/46294/images/80/46294-3.jpg" border="0"></a></td>
                                        <td><a href="http://www.palisadejewelers.com/eBay/46294/images/80/46294-2.jpg" target="_blank" onMouseOver="swapLayers2('lyr3');"><img alt="" src="http://www.palisadejewelers.com/eBay/46294/images/80/46294-2.jpg" border="0"></a></td>
                                        <td><a href="http://www.palisadejewelers.com/eBay/46294/images/80/46294-1.jpg" target="_blank" onMouseOver="swapLayers2('lyr4');"><img alt="" src="http://www.palisadejewelers.com/eBay/46294/images/80/46294-1.jpg" border="0"></a></td>
                                      </tr>
                                    </tbody>
                                  </table>
                                  <div style="color: #666666" class="med"> ~ Rollover to
                                    Preview ~ </div>
                                </center>
<!-- 6/19/2012/ PRODUCT IMAGES ROLLOVERS ENDS 6/19/2012/ -->
Code:
<!-- 6/19/2012/ JAVASCRIPT IMAGE ROLLOVER CODE 6/19/2012/ -->

<script type="text/javascript">
var cur_lyr_roll = "lyr0";
function swapLayers2(id){
if (cur_lyr_roll)
hideLayer(cur_lyr_roll);
showLayer(id);
cur_lyr_roll = id;
}
function showLayer2(id){
var lyr = getElemRefs(id);
if (lyr && lyr.css)
lyr.css.display = "block";
}
function hideLayer2(id){
var lyr = getElemRefs(id);
if (lyr && lyr.css)
lyr.css.display = "none";
}
function getElemRefs2(id){
var el2 = (document.getElementById) ? document.getElementById(id) : (document.all) ? document.all[id] : (document.layers) ? document.layers[id] : null;
if (el2)
el2.css = (el2.style) ? el2.style : el2;
return el2;
}
</script>
          
<!-- 6/19/2012/ JAVASCRIPT IMAGE ROLLOVER CODE ENDS 6/19/2012/ -->