tiene unos años el post pero espero puedan darmen una mano...
la funcion "fotilla(this.width,this.height,this)" funciona ok, pero al momento de cargar la pagina muestra las imagenes en tamaño real antes de acomodarse con el tamaño que le especifico en dicha funcion.
Al mostrarme las imagenes grandes rompe todo el diseño mientras se carga la web completa.
Hay alguna forma de que no aparezcan en tamaño original ?
El codigo:
Código HTML:
<script language="javascript">
var maxAncho = 154
var maxAlto = 115
function fotilla(ancho,alto,cual)
{
if (ancho > alto) {forma = 'apaisada'}
if (ancho < alto) {forma = 'retrato'}
if(forma == 'apaisada')
{
if(ancho > maxAncho)
{
porcientoAnchura = parseInt(maxAncho/ancho*100)
cual.width = maxAncho
cual.height = porcientoAnchura*alto/100
}
}
else if (forma == 'retrato')
{
if (alto > maxAlto)
{
porcientoAltura = maxAlto/alto*100
cual.height = maxAlto
cual.width = porcientoAltura*ancho/100
}
}
}
</script>
La llamo desde aca:
Código PHP:
<div id="clipwrapper">
<div id=clip>
<img src="admin/img/'.MostrarImagen($row["idProducto"]).'" onload="fotilla(this.width,this.height,this)" border="0">
</div>
</div>
Donde los div clipwrapper y clip son recuadros para que corte la imagen.
Código HTML:
#clipwrapper{
position:relative;
height:115px;
width:154px;
border: #dbdbdc 1px solid;
text-align:center;
}
.clip{
position:absolute;
clip:rect(2px 152px 113px 2px);
}
Gracias ....
