Problema con REDIMENCIONAMIENTO de imagenes

Maxi2009 · #1 (**permalink**) 24/08/2009, 23:53

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>

zerokilled · #2 (**permalink**) 25/08/2009, 02:14

Cita:

Iniciado por Maxi2009

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.

eso es normal en todo los navegadores graficos. esta hecho de esa manera para evitar la deformación proporcional. creo, en el unico caso cuando no sucede así es cuando el elemento contiene uno de los atributos para ancho o alto.

Cita:

Iniciado por Maxi2009

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.

esto sucede porque no estas leyendo las dimensiones orignales de la imagen. recuerda que las propiedades width y height en javascript son el sinonimo de los atributos widht y height en HTML. de modo que al asignar un valor a la propiedad es como haber escrito el atributo en el codigo HTML. la solucion es vaciar el valor asignado a las propiedades cuando cambies de imagen. algo como document['imgMain'].width = null; document['imgMain'].height = null;