scrolling a clipped div with image rollovers

[archanix]

need help with displaying image rollovers within a clipped div.

i was able to get the images to display how i want... but if you scroll down to the fourth one and rollover the product name, the image is positioned to the top of the content div and that part is clipped. i was suggested to ask this question in the js forum about using a negative margin to scroll the div instead of using top position. i want the image to display in the exact spot as the first 3 images display.

here is the problem page:
http://katherineheinmd.com/test/products.html

[paul_wilkins]

I would have to say that the larger image should not be located inside the clipped div area, and should instead be outside of it all together.

[archanix]

well thats my question... how can i get the rollovers to trigger the image to show if its positioned outside that div.

[paul_wilkins]

I would have the link point to the larger image, then have the onmouseover event update a location outside of the scrolling area with the image that is being linked to.

[archanix]

thanks. this worked...

JS

<script language="Javascript">
<!--
function toggleImg(id,flagit) {
if (flagit=="1"){
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
}
else
if (flagit=="0"){
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
//-->
</script>

HTML

<a href="#" onMouseOver="toggleImg('product1',1)" onMouseOut="toggleImg('product1',0)">product</a>

<img src="product.jpg" id="product1" />

then just absolutely positioning product1 in the css with its visibility set to hidden