Create Hover image for small cat thumbs?

Question

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

Answer 1

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?