Mouseover / Script Problem

[chiefthinkerupper]

I have a template that I use for postings products online, you can view a copy of it here: http://www.palisadejewelers.com/Mobile_Template/46294.html
I have some JavaScript which displays a large image when you rollover the thumbnail.
For some reason whenever you rollover the image other than lyr4 (the thumbnail all the way to the right, which happens to be the default/original large image) it puts that image under the original image and displays both one on top of the other.

Any help is appreciated.

Below is the HTML and then the Script.

<!-- 6/19/2012/ PRODUCT IMAGES ROLLOVERS 6/19/2012/ -->
<td valign="top" width="400px">
                                <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/ -->

<!-- 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/ -->

[vwphillips]

replace

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;
}

with

var cur_lyr_roll = "lyr4";

function swapLayers2(id){
 var obj=document.getElementById(cur_lyr_roll);
 obj?obj.style.display='none':null;
 cur_lyr_roll=id;
 obj=document.getElementById(cur_lyr_roll);
 obj?obj.style.display='block':null;
}

the actual mistake is
var cur_lyr_roll = "lyr0";
should be
var cur_lyr_roll = "lyr4";

but the scond code is better

or you dispence with the global variable and could use

function swapLayers2(id){
 var obj=document.getElementById(id);
 if (obj){
  for (var clds=obj.parentNode.getElementsByTagName('DIV'),z0=0;z0<clds.length;z0++){
   clds[z0].style.display=clds[z0].id!=id?'none':'block';
  }
 }
}

[Deadweight]

I've made something like this that might work a little better

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery 1.9.1 Online</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
    
    img_names = ['http://www.palisadejewelers.com/eBay/46294/images/46294-1.jpg','http://www.palisadejewelers.com/eBay/46294/images/46294-2.jpg','http://www.palisadejewelers.com/eBay/46294/images/46294-3.jpg','http://www.palisadejewelers.com/eBay/46294/images/46294-4.jpg','http://www.palisadejewelers.com/eBay/46294/images/46294-5.jpg'];
    
    
    amount = img_names.length;
    $("#img_gallery").html('<tr><td id="main_image" colspan="'+amount+'"><img src="'+img_names[0]+'" /></td></tr><tr id="items">'+create_td(amount,img_names)+'</tr>');
    
$(document).on('mouseover','#items>td',function(){
    loc = $(this).index();
    $('#main_image>img').attr("src",img_names[loc]);;
});

});



function create_td(total,array_imgs){
    content = '';
    for(i=0;i<total;i++){
        content += '<td><div class="thumbs"><img src="'+array_imgs[i]+'" /></div></td>';
    }
    return content;
}

</script>
<style>
#img_gallery {width:400px;}
#main_image {height:400px;}
#main_image img {max-width:100%;max-height:100%;}

.thumbs {width:100px; height:100px;border:1px solid black;}
.thumbs img {max-width:100%;max-height:100%;}
</style>
</head>
<body>
<table id="img_gallery">

</table>

</body>
</html>