Witam wszystkich i proszę o pomoc

mam coś takiego:

<script>
function pokaz(obrazek) {


document.getElementById('fotodiv').style.display = "block";
document.getElementById('foto').src = "galeria/zbiorniki/cylindryczne/"+obrazek;

}

function ukryj() {


document.getElementById('fotodiv').style.display = "none";


}
</script>



<table border="1" cellspacing="0" cellpadding="0" width="540" height="231"> <tbody> <tr>
<td align="center" style="padding: 2px">



<img onclick="pokaz('1.jpg')" border="0" src="galeria/zbiorniki/cylindryczne/miniatury/1.jpg" alt=""/>

<div valign="top" onclick="ukryj()" id="fotodiv" style="position:absolute; display:none; left:50px; top:20px">
<img id="foto" src="galeria/zbiorniki/cylindryczne/1.jpg" alt=""/>
</div>


</td> </tr> </tbody></table>

i teraz mam taki problem że jak na stronie wyświetla sięnp 6 zdjęć to jest wszystko wporządku i powiększenie zdjęcia wyświetla się 20px od góry

ale jesli tych zdjęć jest dużo to niestety ale w przypadku kiedy zjadę scrollę niżej po kliknięciu w zdjęcie oczywiście się powiększa ale cały czas 20px od początku strony czyli na monitorze zdjęcia nie widać wcale dopiero trzeba przesunąć scrolla do góry

czy można jakoś uzależnić to zdjęcie aby poazywało się w miejscu które aktualnie pokazuje nam sam monitor??

[HTML] pobierz, plaintext 
...
function pokaz(obrazek) {
    if (document.documentElement && document.documentElement.scrollTop) {
	Top = document.documentElement.scrollTop;
    }else if (document.body){
	Top = document.body.scrollTop;
    }
    document.getElementById('fotodiv').style.top = Top+"px";
    document.getElementById('fotodiv').style.display = "block";
    document.getElementById('foto').src = "galeria/zbiorniki/cylindryczne/"+obrazek;
}
...
[HTML] pobierz, plaintext 

dziękuje bardzo za pomoc
włąśnie o to mi chodziło

wielkie dzięki