www.webdeveloper.com
Results 1 to 3 of 3

Thread: Javascript swap layers on mouseover problem.

  1. #1
    Join Date
    Jan 2014
    Posts
    2

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

  2. #2
    Join Date
    Jan 2010
    Posts
    79
    You have made the last image in the row visible but you didnt set your "cur_lyr_roll" to the correct value

    The line:
    Code:
    var cur_lyr_roll = "lyr0";
    Should be:
    Code:
    var cur_lyr_roll = "lyr4";
    V

  3. #3
    Join Date
    Jan 2014
    Posts
    2
    Vince,
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles