Hi everyone! I am using some JS and CSS that loads a big image when you rollover the small image. This effect works when the small image is fully shown in the browser but if the browser is resized so the small image is cut off showing half the image then the bigger image doesnt adjust with the browser. I would like to know how to get the big image to adjust with the browsers height and width.

This is the JS I am using:
Code:
<script type="text/javascript">
function display(x,y,text,src) {
var brokenstring = src.split("_small");
var newstring = brokenstring[0]+'_big'+brokenstring[1];

var c = document.getElementById("capt");
c.innerHTML ="";
c.style.left = x + "px";
c.style.top = y + "px";

var myImage = document.createElement('img');
myImage.setAttribute('src',newstring);
myImage.setAttribute('alt','');
c.appendChild(myImage);

c.appendChild(document.createTextNode(text));
}

function showdiv(id) {
t = document.getElementById(id);
document.getElementById("capt").style.display = "block";
t.onmousemove = function(e) {
var ev = e || event,ox=20,oy=20;
display(ev.clientX+ox,ev.clientY+oy,this.getAttribute("alt"),this.getAttribute("src"));
return false;
}
}
function hidediv() {
document.getElementById("capt").style.display = "none";
}

</script>
The big image loads in this div:
Code:
<div style="display: none; left: 437px; top: 32px;" id="capt"></div>
I hope someone out there knows how to do this?!