I've got a gallery with a number of different size images. Thumbnails trigger the image swap. In safari the new image seems to remember the dimensions of the last image and (inconsistantly) resizes the new image to that of the last one. Obviously I don't want this.

Any ideas how to get around this? I assume some form of detections is needed.

Here's the head code:

Code:
<script language="JavaScript" type="text/javascript">
  if(document.images) {
    pics = new Array();
    pics[1] = new Image();
    pics[1].src = "img/style/420/Bookshelf-and-photo.jpg";
    pics[2] = new Image();
    pics[2].src = "img/style/420/Box-of-leather.jpg";
	pics[3] = new Image();
    pics[3].src = "img/style/420/Coconut-bowls.jpg";
	pics[4] = new Image();
    pics[4].src = "img/style/420/Dog-collars.jpg";
	pics[5] = new Image();
    pics[5].src = "img/style/420/Hibiscus-flower.jpg";
	pics[6] = new Image();
    pics[6].src = "img/style/420/Lanterns.jpg";
	pics[7] = new Image();
    pics[7].src = "img/style/420/Lemon-Tea.jpg";
	pics[8] = new Image();
    pics[8].src = "img/style/420/Ring-and-wood.jpg";
	pics[9] = new Image();
    pics[9].src = "img/style/420/Shells-in-bowl.jpg";
	pics[10] = new Image();
    pics[10].src = "img/style/420/Tea-Block.jpg";	
  }
    function changer(from,to) {
    if(document.images) {
    document.images[from].src = pics[to].src;
    }
  }
  
</script>
Here's the body:
Code:
<div id='main_img'>
			<img alt='' name='holder' src="img/style/420/Tea-Block.jpg" />
		</div>
		<div class='thumbs style'>
			<a onFocus="if(this.blur)this.blur()" href="javascript:;"  onMouseDown="changer('holder',10)"><img alt='' src='img/style/70/Tea-Block.jpg' /></a>
			<a onFocus="if(this.blur)this.blur()" href="javascript:;"  onMouseDown="changer('holder',1)"><img alt='' src='img/style/70/Bookshelf-and-photo.jpg' /></a>
			<a onFocus="if(this.blur)this.blur()" href="javascript:;"  onMouseDown="changer('holder',5)"><img alt='' src='img/style/70/Hibiscus-flower.jpg' /></a>
			<a onFocus="if(this.blur)this.blur()" href="javascript:;"  onMouseDown="changer('holder',3)"><img alt='' src='img/style/70/Coconut-bowls.jpg' /></a>

etc etc