#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    2
    Rep Power
    0

    Javascript swap layers on mouseover problem.


    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/Mobile_Template/46294.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/ -->
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Apr 2003
    Posts
    569
    Rep Power
    70
    I havent't tested this, but the line "el2.css = (el2.style) ? el2.style : el2;" looks suspicious. In English it basically says: If el2 has a style, set it's css property to the style, otherwise set it's css property to the full object. Doesn't seem right...
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    2
    Rep Power
    0
    I made the following changes:

    1) I reordered the images so that image 1 is layer 0
    2) I changed
    Code:
    <div style="display:block; margin: 0pt;" id="lyr4">
    to
    Code:
    <div style="display:none; margin: 0pt;" id="lyr4">
    and everything seems to be working perfectly now.

IMN logo majestic logo threadwatch logo seochat tools logo