Problema con imagenes... text/javascript

[Martine]

Hola... tengo un script:

Al pasar el mouse sobre una imagen pequeña, la imagen grande se desplaza como parabriza (GradientWipe).

Lo extraño es que la primera vez que pasa el mouse sobre cualquiera de las imagenes pequeñas... antes de que se desplace la imagen grande, se queda viendo como una parte de la imagen que aparece predeterminada.

Para entenderlo mejor... esta es la página:
http://gomezeliza.com/murals4.html

A continuación el Script... se podrá hacer algo para corregir esa falla?

<SCRIPT TYPE="text/javascript">
//Specify image paths and optional link (set link to "" for no link):
var dynimages=new Array()
dynimages[0]=["http://gomezeliza.com/images/2.jpg", ""]
dynimages[1]=["http://gomezeliza.com/images/3.jpg", ""]
dynimages[2]=["http://gomezeliza.com/images/4.jpg", ""]
dynimages[3]=["http://gomezeliza.com/images/5.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.Gr adientWipe(GradientSize=0.1 Duration=2)"

///////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>

Luego... las imagenes pequeñas van así:
<A HREF="#"
ONMOUSEOVER="modifyimage('dynloadarea', 0)">
<IMG SRC="http://gomezeliza.com/images/mini-2-2.jpg" WIDTH="56" HEIGHT="86"
STYLE="border-top: 1px #B9A03A solid; border-right: 1px #B9A03A solid; border-bottom: 1px #B9A03A solid; border-left: 1px #B9A03A solid"></A>

Y la imagen grande así:


<DIV ID="dynloadarea" STYLE="width:301px;height:398px"
ALIGN="CENTER"> </DIV>