CSS/HTML Help (hover images in scroll boxes)?

[Katie-Bear]

I am creating a website in Dreamweaver, I have images in table in a scroll box these images have a hover code to show a more enlarged image however the hover image is fixed to the top left corner of the scroll box and even after I scroll down the image doesnt move and eventually cuts off. I would like the hover image to either be outside the scroll box all together or move with the scroll box.

the scroll box code I am using is:
<div style="height:600px;width:495px;overflow:scroll;"

and the hover code in my CSS is:

#picture {width:100px; height: 100px; background-color:#ffffff;}
#picture a.small, #picture a.small:visited { display:block; width:100px; height:100px; text-decoration:none; background:#transparent; top:0; left:0; border:0;}
#picture a img {border:0;}
#picture a.small:hover {text-decoration:none; background-color:#transparent; color:#transparent;}
#picture a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#picture a.small:hover .large {display:block; position:absolute; top: 90px; left:150px; width:200px; height:200px; }

the hover image code in the HTML is:

<center><table border="1" cellpadding="7" cellspacing="0">

<tr>
<td>
<div id="picture">
<a class="small" href="#" title="small image"><img src="D:\Simpsons_Military_WEBSITE\site_flash\images\Armyhats\usa.gif" width="123" height="123" alt="" title="small image">
<img class="large" src="D:\Simpsons_Military_WEBSITE\site_flash\images\Armyhats\usa.gif" title="large image"></a>
</div>
<b>US Army</b><br>
$14.95<br></td>
<td>
<div id="picture">
<a class="small" href="#" title="small image"><img src="D:\Simpsons_Military_WEBSITE\site_flash\images\Armyhats\usa_vet.gif" width="123" height="123" alt="" title="small image">
<img class="large" src="D:\Simpsons_Military_WEBSITE\site_flash\images\Armyhats\usa_vet.gif" title="large image"></a>
</div>
<b>US Army Vet</b><br>
$14.95<br></td>
</tr>
</table>


However I have 32 rows of table...

Can someone help me?