Image Refresh Not Working?

I've got an image that I want to refresh every time a certain event occurs. So in my html I've got something like <div><img name="theImage" src="anImage.jpg" alt="No image found" onclick="refreshImage();" /></div>

Then in the javascript I have

function refreshImage()
{
var now = new Date();
document.images["theImage"].src = "anImage.jpg?" + now.getTime();
}

So before I click the image to trigger the event, I change the image on the server, but keeping the same name. So the image displayed in the browser should change to the new one when I click it. But when I do this, the image DOES change, but part of the bottom gets cut off. There's enough space for the whole image, in fact if I put a border around the div, the border is just the right size, but only part of the image is being displayed. Also, it is always the top part of the image being displayed.