1 Reply Latest reply: Sep 6, 2013 11:14 AM by jefferis RSS

    Create Hover image for small cat thumbs?

    jefferis Community Member
    jefferis Sep 4, 2013 1:05 PM

      Hi,    I was trying to use javascript to create a pop up hover image for the catalogs, but I can't get it to work with the tag format for small and large images 

       

      Anyone have any ideas?

       

       

      <div class="shop-product-small {tag_custom2}">

      <div style="display: none; position: absolute;

      z-index: 110; left: 400; top: 100; width: 15;

      height: 15" id="preview_div"></div>

      <div class="image">

      {tag_smallimage}  </div>

      <h5>{tag_name}</h5>

      <ul>

          <li class="price">Price: <strong><span class="noprice">{tag_saleprice}</span></strong></li>

          <li class="quantity">Qty: <strong>{tag_addtocartinputfield}</strong> {tag_addtocart}</li>

          <li class="callus"><em>Call for Price</em></li>

      </ul>

      </div>

       

      I was trying to use something like this: <img src="smallpic.jpg" width="100" height="142" style="padding-top:23px;" onmouseover="showtrail(310,440,'largepic.jpg');" onmouseout="hidetrail();" />

       

      But you can't use img src or tag_small image in the display...

        • 1. Re: Create Hover image for small cat thumbs?
          jefferis Community Member
          jefferis Sep 6, 2013 11:14 AM (in response to jefferis)

          Well, jusing javascript appears to be a problem in that , if I use js the item pops up but is within the narrow table cell frame of the small item display and is clipped. And CSS hover class doesn't seem to work either, even with a high z-index.  Not sure it is possible with the way BC works with catalogs..?   When I did get the js to work, it opens the large image of the last item on the page, not the one you hover over.

           

          Anyone else get that feature to work?