Ayuda con efecto agrandar imagen

[Trilan]

Hola necesitaba ayuda para hacer que varias imágenes tengan el efecto de cuando pasen el Mouse sobre ella se agrande. y cuando lo quite regrese ala normalidad.

Tambien me gustaria saber como hacerle para cuando cambie de tamaño la imagen no se desacomoden los demas elementos.





Muchas gracias






Yours Trilan

[alor86]

puedes definir un tamaño para la imagen original por ejemplo <img src='img1.jpg' style='width:100px;height:100px' id='img1' onmouseover='agrandar("img1")'/>

y en la funcion agrandar puedes cambiar las propiedades css
asi

function agrandar(id){
var img = document.getElementById(id);
img.style.position='absolute';
img.style.zIndex+=1;
img.style.width='200px';
img.style.height='200px';
}
el contenedor donde estan las imagenes tiene que tener la propiedad css position:relative
y asi agrandaras la imagen sin mover a las otras imagenes y pues con el evento onmouseout puedes invocar otra funcion para reducir el tamaño que es parecida a la funcion agrandar

[alor86]

puedes definir un tamaño para la imagen original por ejemplo <img src='img1.jpg' style='width:100px;height:100px' id='img1' onmouseover='agrandar("img1")'/>

y en la funcion agrandar puedes cambiar las propiedades css
asi

function agrandar(id){

var img = document.getElementById(id);
img.style.position='absolute';
img.style.zIndex+=1;
img.style.width='200px';
img.style.height='200px';

}
el contenedor donde estan las imagenes tiene que tener la propiedad css position:relative
y asi agrandaras la imagen sin mover a las otras imagenes y pues con el evento onmouseout puedes invocar otra funcion para reducir el tamaño que es parecida a la funcion agrandar