Problema gordo con código de un visor de imágenes (Script sacado de internet)

Hola amigos.

Hacendo una web para el insti, el profesor nos dio un script para hacer un visor de imágenes, que funciona perfectamente en Explorer, pero en FireFox pincha. Me abre la imagen donde no toca, y 100% descentrada.

Os doy el código:

Código:

<html>
<head>

<style TYPE="text/css">

</style>

<script type="text/javascript">

/***********************************************
* Pop-it Image 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]=["logros/3dMark06FX.jpg", ""]
dynimages[1]=["logros/CPUzOpty.jpg", ""]
dynimages[2]=["logros/MegaOC.jpg", ""]
dynimages[4]=["logros/TestHD.jpg", ""]
dynimages[5]=["logros/3dmark06gt2.jpg", ""]
dynimages[6]=["logros/pi26s.jpg", ""]
dynimages[8]=["logros/completo.jpg", ""]
dynimages[9]=["imagenes/elsanimals/p7110073.jpg", ""]
dynimages[10]=["imagenes/elsanimals/p7110116.jpg", ""]
dynimages[11]=["imagenes/elsanimals/p7110066.jpg", ""]
dynimages[12]=["imagenes/elsanimals/p7110072.jpg", ""]
dynimages[13]=["imagenes/elsanimals/p7110118.jpg", ""]
dynimages[14]=["imagenes/elsanimals/p8140025.jpg", ""]
dynimages[15]=["imagenes/elsanimals/p7110075.jpg", ""]
dynimages[16]=["imagenes/elsanimals/p8140040.jpg", ""]
dynimages[17]=["imagenes/elsanimals/otro.jpg", ""]

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

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

//Set image border width
var imgborderwidth=4

//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
[b]var filterstring="progid:DXImageTransform.Microsoft.GradientWipe[/b](GradientSize=1.0 Duration=0.7)"

///////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 CambiarColorBorde(color, elemento) {
document.getElementById(elemento).style.borderColor = color;
}

function CambiarComentario(comentario, elemento) {
document.getElementById(elemento).value = comentario;
}

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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<style TYPE="text/css">

</style>

<body text="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="90%" border="0" align="center" cellspacing="0" cellpadding="0" height="8">
<tr>
<td width="35%"> </td>

<td width="41%"> </td>
<td width="24%"> </td>
</tr>
</table>

<table width="35%" border="0" align="center" bordercolor="#666666" cellspacing="0" cellpadding="0">
<tr>
<TD height="229">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table id="uno" border="2" bordercolor="#cccccc" cellpadding="0" cellspacing="0" width="51" height="50" >
<tr>
<td>
<a onMouseOver="modifyimage('dynloadarea', 0); CambiarColorBorde('#00ffff', 'uno'); this.style.cursor='hand'" onmouseout =" CambiarColorBorde('#ffffff', 'uno'); this.style.cursor='normal'"
><img border="0" src="logros/3dMark06FX2.jpg" width="50" height="50" ></a>
</td>
</tr>
</table>

</td>
</tr>
<tr>
<td><table id="dos" border="2" bordercolor="#cccccc" cellpadding="0" cellspacing="0" width="51" height="50" >
<tr>
<td>
<a onMouseOver="modifyimage('dynloadarea', 1); CambiarColorBorde('#00ffff', 'dos'); this.style.cursor='hand'" onmouseout =" CambiarColorBorde('#ffffff', 'dos'); this.style.cursor='normal'"
><img border="0" src="logros/pi26s2.jpg" width="50" height="50" ></a>
</td>
</tr>
</table></td>
</tr>
<tr>
<td> <table id="tres" border="2" bordercolor="#cccccc" cellpadding="0" cellspacing="0" width="51" height="50" >
<tr>
<td>
<a onMouseOver="modifyimage('dynloadarea', 2); CambiarColorBorde('#00ffff', 'tres'); this.style.cursor='hand'" onmouseout =" CambiarColorBorde('#ffffff', 'tres'); this.style.cursor='normal'"
><img border="0" src="logros/MegaOC2.jpg" width="50" height="50" ></a>
</td>
</tr>
</table></td>
</tr>
<tr>
<td><table id="cuatro" border="2" bordercolor="#cccccc" cellpadding="0" cellspacing="0" width="51" height="50" >

</table></td>
</tr>
</table>
</TD>
<td border="6" align="center" valign="middle" bordercolor="#FFFFFF" height="229">
<table width="75%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><div id="dynloadarea" style="width:3px;height:5px"></div></td>
</tr>
</table>

</td>

<TD height="229">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table id="cinco" border="2" bordercolor="#cccccc" cellpadding="0" cellspacing="0" width="51" height="50" >
<tr>
<td>
<a onMouseOver="modifyimage('dynloadarea', 4); CambiarColorBorde('#00ffff', 'cinco'); this.style.cursor='hand'" onmouseout =" CambiarColorBorde('#ffffff', 'cinco'); this.style.cursor='normal'"
><img border="0" src="logros/TestHD2.jpg" width="50" height="50" ></a>
</td>
</tr>
</table>

</td>
</tr>
<tr>
<td><table id="seis" border="2" bordercolor="#cccccc" cellpadding="0" cellspacing="0" width="51" height="50" >
<tr>
<td>
<a onMouseOver="modifyimage('dynloadarea', 5); CambiarColorBorde('#00ffff', 'seis'); this.style.cursor='hand'" onmouseout =" CambiarColorBorde('#ffffff', 'seis'); this.style.cursor='normal'"
><img border="0" src="logros/3dmark06gt3.jpg" width="50" height="50" ></a>
</td>
</tr>
</table></td>
</tr>
<tr>
<td> <table id="siete" border="2" bordercolor="#cccccc" cellpadding="0" cellspacing="0" width="51" height="50" >
<tr>
<td>
<a onMouseOver="modifyimage('dynloadarea', 6); CambiarColorBorde('#00ffff', 'siete'); this.style.cursor='hand'" onmouseout =" CambiarColorBorde('#ffffff', 'siete'); this.style.cursor='normal'"
><img border="0" src="logros/completo2.jpg" width="50" height="42" ></a>
</td>
</tr>
</table></td>
</tr>
<tr>
<td><table id="ocho" border="2" bordercolor="#cccccc" cellpadding="0" cellspacing="0" width="51" height="50" >

</table></td>
</tr>
</table>
</TD>
</tr>
</table>
<table width="23%" border="0" align="center" cellspacing="0" cellpadding="0" height="51">
<tr>
<td>
<table id="nueve" border="2" bordercolor="#cccccc" cellpadding="0" cellspacing="0" width="31" height="50" >
<tr>

<td> <a onMouseOver="modifyimage('dynloadarea', 8); CambiarColorBorde('#00ffff', 'nueve'); this.style.cursor='hand'" onmouseout =" CambiarColorBorde('#ffffff', 'nueve'); this.style.cursor='normal'"
><img border="0" src="/dsf" width="50" height="33" ></a>
</td>
</tr>
</table>
</td>
<td><table id="diez" border="2" bordercolor="#cccccc" cellpadding="0" cellspacing="0" width="31" height="50" >
<tr>
<td>
<a onMouseOver="modifyimage('dynloadarea', 9); CambiarColorBorde('#00ffff', 'diez'); this.style.cursor='hand'" onmouseout =" CambiarColorBorde('#ffffff', 'diez'); this.style.cursor='normal'"
><img border="0" src="imagenes/elsanimals/p7110073.jpg" width="50" height="33" ></a>
</td>
</tr>
</table>
</td>
<td><table id="once" border="2" bordercolor="#cccccc" cellpadding="0" cellspacing="0" width="31" height="50" >
<tr>
<td>
<a onMouseOver="modifyimage('dynloadarea', 10); CambiarColorBorde('#00ffff', 'once'); this.style.cursor='hand'" onmouseout =" CambiarColorBorde('#ffffff', 'once'); this.style.cursor='normal'"
><img border="0" src="imagenes/elsanimals/p7110116.jpg" width="50" height="33" ></a>
</td>
</tr>
</table>
</td>
<td><table id="doce" border="2" bordercolor="#cccccc" cellpadding="0" cellspacing="0" width="31" height="50" >
<tr>
<td>
<a onMouseOver="modifyimage('dynloadarea', 11); CambiarColorBorde('#00ffff', 'doce'); this.style.cursor='hand'" onmouseout =" CambiarColorBorde('#ffffff', 'doce'); this.style.cursor='normal'"
><img border="0" src="imagenes/elsanimals/p7110066.jpg" width="50" height="33" ></a>
</td>
</tr>
</table>
</td>
<td><table id="trece" border="2" bordercolor="#cccccc" cellpadding="0" cellspacing="0" width="31" height="50" >
<tr>
<td>
<a onMouseOver="modifyimage('dynloadarea', 12); CambiarColorBorde('#00ffff', 'trece'); this.style.cursor='hand'" onmouseout =" CambiarColorBorde('#ffffff', 'trece'); this.style.cursor='normal'"
><img border="0" src="imagenes/elsanimals/p7110072.jpg" width="50" height="33" ></a>
</td>
</tr>
</table>
</td>
<td><table id="catorce" border="2" bordercolor="#cccccc" cellpadding="0" cellspacing="0" width="31" height="50" >
<tr>
<td>
<a onMouseOver="modifyimage('dynloadarea', 13); CambiarColorBorde('#00ffff', 'catorce'); this.style.cursor='hand'" onmouseout =" CambiarColorBorde('#ffffff', 'catorce'); this.style.cursor='normal'"
><img border="0" src="imagenes/elsanimals/p7110118.jpg" width="50" height="33" ></a>
</td>
</tr>
</table>
</td>
<td><table id="quince" border="2" bordercolor="#cccccc" cellpadding="0" cellspacing="0" width="31" height="50" >
<tr>
<td>
<a onMouseOver="modifyimage('dynloadarea', 14); CambiarColorBorde('#00ffff', 'quince'); this.style.cursor='hand'" onmouseout =" CambiarColorBorde('#ffffff', 'quince'); this.style.cursor='normal'"
><img border="0" src="imagenes/elsanimals/p8140025.jpg" width="50" height="33" ></a>
</td>
</tr>
</table>
</td>
<td><table id="dieciseis" border="2" bordercolor="#cccccc" cellpadding="0" cellspacing="0" width="31" height="50" >
<tr>
<td>
<a onMouseOver="modifyimage('dynloadarea', 15); CambiarColorBorde('#00ffff', 'dieciseis'); this.style.cursor='hand'" onmouseout =" CambiarColorBorde('#ffffff', 'dieciseis'); this.style.cursor='normal'"
><img border="0" src="imagenes/elsanimals/p7110075.jpg" width="50" height="33" ></a>
</td>
</tr>
</table>
</td>
<td><table id="diecisiete" border="2" bordercolor="#cccccc" cellpadding="0" cellspacing="0" width="31" height="50" >
<tr>
<td>
<a onMouseOver="modifyimage('dynloadarea', 16); CambiarColorBorde('#00ffff', 'diecisiete'); this.style.cursor='hand'" onmouseout =" CambiarColorBorde('#ffffff', 'diecisiete'); this.style.cursor='normal'"
><img border="0" src="imagenes/elsanimals/p8140040.jpg" width="50" height="33" ></a>
</td>
</tr>
</table>
</td>
<td><table id="dieciocho" border="2" bordercolor="#cccccc" cellpadding="0" cellspacing="0" width="31" height="50" >
<tr>
<td>
<a onMouseOver="modifyimage('dynloadarea', 17); CambiarColorBorde('#00ffff', 'dieciocho'); this.style.cursor='hand'" onmouseout =" CambiarColorBorde('#ffffff', 'dieciocho'); this.style.cursor='normal'"
><img border="0" src="imagenes/elsanimals/otro.jpg" width="50" height="33" ></a>
</td>
</tr>
</table>
</td>

</tr>
</table>
<table width="90%" border="0" align="center" cellspacing="0" cellpadding="0" height="8">
<tr>
<td width="35%"> </td>

<td width="41%"> </td>
<td width="24%"> </td>
</tr>
</table>

<div id="dynloadarea2" style="width:2px;height:7px"></div>
</body>
</html>

Creemos que el problema puede estar en la línea marcada en negrita. Qué decís?

Básicamente porque aparece Microsoft y la variable GradientWipe es de Explorer.

A ver si me echáis una manita.

Salu2