Cambiar imágenes dinámicamente

Cambiar imágenes dinámicamente

Nos puede suceder que necesitemos cambiar imágenes en forma dinámica con javascript, que al clickear una imagen se vea más grande en otro lugar y lo mismo al clickear otra imagen, ya a esto se le puede dar varios efectos pero tu sabrás cuales darles o para que lo necesitas, yo en este caso te explicaré como hacerlo, primero necesitamos poner el lugar donde irá la imagen por ejemplo:

<img src=”auto.png” id=”imgcambiar”>

Le agregué un ID que es para poder reconocerlo luego al momento de querer cambiar la imagen, ahora que tenemos eso podemos crear una función que cambie la imagen por otra, por ejemplo un botón que cambié la imagen auto.png por la imagen animales.png:

<input type=”button” name=”boton” value=”Cambiar” onclick=”document.getElementById(‘imgcambiar’).src=’animales.png’;”>

En esa línea de código lo que hicimos fue agregar el evento onclick a un botón para que cuando se presione el mismo cambie el src de la imagen y de este modo se actualice por la imagen animales.png