Mostrar una imagen en una capa de manera fácil y sencilla

La tarea es que al hacer click en una liga o algo en nuestra página que diga “Ver imagen fulana” salga en un área de nuestra página tal imagen sin tener que recargar toda la página.

Al principio podría parecer una tarea para Ajax, pero no es necesario irse a tanto. La función de javascript innerHTML nos puede ayudar a hacer eso. El script sería el siguiente:

function muestraImagen(imagen) {
var cuadro = document.getElementByID('cuadro');
var codigo = "<img src='" + imagen + "' />";
cuadro.innerHTML = codigo;
}

Y cuando tengamos nuestra liga le podemos poner:

<a href=”#” onClick=”muestraImagen(‘perico.jpg’);”>Ver un perico</a>

Y en la capa que se llame <div id=”cuadro”> aparecerá el perico.

Por supuesto esto es algo muy básico y sin más florituras, pero puedes empezar de aquí.