Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript swap layers question…

    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 from one picture to the next, however when you roll over any image other than the first “main” image it displays both images large one above the other.


    [HTML]<!-- 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/ -->
    [/HTML]

    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
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,402
    Thanks
    11
    Thanked 595 Times in 575 Posts
    i would just start over with a different script, preferably one based on jQuery, zepto, or mootools, which would make this whole table-based code obsolete.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #3
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •