Cambiar camaño de una imagen gradualmente?

[Tecktonikrazy]

Para cambiar el tamaño de una imagen onmouseover seria algo como:

Código HTML:

<img id="imagen" src="imagen.jpg" onmouseover="cambiarTamaño('100','100')" onmouseout="cambiarTamaño('50','50')">

<script language="javascript">


function cambiarTamaño(ancho,alto){

document.getElementById('imagen').style.width = ancho + 'px';
document.getElementById('imagen').style.height = alto + 'px';

}

</script> 

Pero como hago para que esto ocurra gradualmente, es decir que el tamaño aumente o disminuya poco a poco y no de golpe?

[_cronos2]

Tendrías que usar una variable que empezara en su tamaño actual y fuera aumentando cada x segundos para que fuera poco a poco, pero la cuestión es cómo saber el tamaño, porque si tiene declarado un tamaño predeterminado lo puedes saber con style.width y height, pero si no es undefined. Si está definido en una hoja de estilos, podrías acceder a la hoja de estilos y coger el valor que necesites, pero si vienen con el tamaño de la imagen habría que calcularlo con la diferencia entre la anchura de la pantalla y lo que hay desde la izquierda hasta la imagen y desde la derecha, así que yo creo que es el paso más complicado xD

[_Adrian_]

Para que sea más fácil, puedes utilizar la biblioteca script.aculo.us; ej.: http://madrobby.github.com/scriptaculous/effect-grow/ (está en inglés).

Saludos

[Tecktonikrazy]

mmmmmmm no entiendo como se usa eso de las bibliotecas, la verdad no me avia puesto a investigar sobre ellas, como se usan? o como se instalan?