Amigos, tengo un codigo en que cargo 5 imagenes de diversos tamaños, esas imagenes las muestro en 50 x50 pixeles inicialmente, hice dos funciones, la primera me redimenciona la imagen y la otra funcion cambia la imagen.
Ahora he notado dos problemas:
1 - Al cambiarle solo el ancho de la imagen se cambia automaticamente el alto de la imagen, por lo cual en la funcion no hace falta cambiarla, pero es raro este comportamiento.
2 - El otro PROBLEMA sin solucionar si la imagen excede el alto permitido, la funcion cambia perfectamente, pero al volver a cambiar a otra imagen ya las imagenes anteriores cambiaron de dimencion.
Existe alguna posibilidad de hacer algun minimo cambio a este codigo para que funcione correctamente?
GRACIAS.
<html>
<head>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
function swap(imgIndex) {
document['imgMain'].src = imgIndex;
}
function resi(e){
wt=250;ht=350;
w=e.width;h=e.height;if(w>wt){e.width=wt;}; // aca al variar el ancho automaticamente se acomoda el alto.
w=e.width;h=e.height;if(h>ht){e.height=ht;e.width= e.width*(ht/h);}; // si se excede del alto cambia todo.
}
</script>
<a href="javascript
:swap('f1.jpg')"><img src="f1.jpg" border="0" width="50" height="50"></a>
<a href="javascript
:swap('f2.jpg')"><img src="f2.jpg" border="0" width="50" height="50"></a>
<a href="javascript
:swap('f3.jpg')"><img src="f3.jpg" border="0" width="50" height="50"></a>
<a href="javascript
:swap('f4.jpg')"><img src="f4.jpg" border="0" width="50" height="50"></a>
<a href="javascript
:swap('f5.jpg')"><img src="f5.jpg" border="0" width="50" height="50"></a>
<table width="250" height="350" border="1" bgcolor="#CC9900">
<tr>
<td align="center" valign="middle" bgcolor="#000000"><img src="" onload="resi(this)" name="imgMain" border="1"></td>
</tr>
</table>
</body>
</html>