Image Thumbnail Viewer II & onMouseOut

[Formica]

I've run into a bit of a problem that I cannot seem to solve myself. Any help would be appreciated. Here goes...

I have images of different heights and widths, so when you scroll over one and then scroll over the other they are layered on top of each other and it just doesn't look proper (see http://28-200mm.com/bwcolor.html), so I need to have an onMouseout code in there that returns the load area to blank and I don't know how to write it so that it works.

This is were I imagine it would go:

<a href="#" onMouseover="modifyimage('dynloadarea', 0)"><img src="/28-200mm/selfportrait.jpg" 

width="100" height="68" border="0"></a>

Secondly, I'd like for the columns to be closer together, is there a way to do this? and where would I put the code to do this?

Here is the Image Thumbnail View Script in its entirety:

between the head tag

<script type="text/javascript">

/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Specify image paths and optional link (set link to "" for no link):
var dynimages=new Array()
dynimages[0]=["/28-200mm/selfportrait.jpg", ""]
dynimages[1]=["/28-200mm/rockingchair.jpg", ""]
dynimages[2]=["/28-200mm/window.jpg", ""]
dynimages[3]=["/28-200mm/stmatthews.jpg", ""]
dynimages[4]=["/28-200mm/jacob.jpg", ""]

//Preload images ("yes" or "no"):
var preloadimg="no"

//Set optional link target to be added to all images with a link:
var optlinktarget=""

//Set image border width
var imgborderwidth=0

//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in 

IE5.5+:
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=.1 Duration=0.1)"

///////No need to edit beyond here/////

if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}

function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}

</script>

and in the body

<div style="position: absolute; left: 25px; top: 50px; width: 250px;">
<a href="#" onMouseover="modifyimage('dynloadarea', 0)"><img src="/28-200mm/selfportrait.jpg" 

width="100" height="68" border="0"></a>
<a href="#" onMouseover="modifyimage('dynloadarea', 2)"><img src="/28-200mm/window.jpg" 

width="100" height="68" border="0"></a>
<a href="#" onMouseover="modifyimage('dynloadarea', 3)"><img src="/28-200mm/stmatthews.jpg" 

width="100" height="68" border="0"></a>
<a href="#" onMouseover="modifyimage('dynloadarea', 4)"><img src="/28-200mm/jacob.jpg" width="100" 

height="68" border="0"></a>
<a href="#" onMouseover="modifyimage('dynloadarea2', 1)"><img src="/28-200mm/rockingchair.jpg" 

width="83" height="100" border="0"></a>
<p>
</div>

<div id="dynloadarea" style="position: absolute; left:525px; top: 104px; 

width:410px;height:410px"></div>

<div id="dynloadarea2" style="position: absolute; left:560px; top:38px; 

width:410px;height:410px"></div>

I appreciate any help. Thanks.

[Formica]

Ok, I've got the spacing figured out (doh!), but I'm still baffled on the onmouseout event. I need help... please.