cargar imagen en un div?

Buenas
Estoy intentando hacer una web a lo 2.0
y necesito cargar imagenes dentro de un <div> dependiendo del enlaces
me refiero a que al hacer click sobro un link me cargue una imagen entre las <div class="caja"></div>

soy muy ignirante en este tema.

Intente cargar las imagenes con un codigo que hacia cargar, no imagenes, sino archivos .html y el resultado fue un monton de caracteres (que supongo era la imagenes abierta en modo de texto)

bueno espero que alguien pueda ayudarme
busque en esta misma web y no lo encontre al igual que en google
talvez es mmuy basico para ser enseñado

hm.. no seria mejor que utilizaras iframe? en vez de div?, ya que en el iframe puedes mandar a cargar desde un boton a que abra en el espacio que coloques en el iframe. me parece que es comodo y que puedes cambiarle el tamaño a la necesidad de la imagen o html que vayas abrir.

Gracias
No tenia idea que era un iframe
me sirvio y ya lo esoty utilizando
por eso que no encontraba respuesta en sangoogle
gracias

oh.. iframes son taan oldschool..

Haz algo fácil, con javascript cada que se de click en uno de esos enlaces que active una función.
La función recogerá la ruta de la imagen desde el href del enlace y luego creas el nodo img. Pasas la info del href al src y listo.

No es nada complicado, es solo que uno necesita aprender 1. Javascript, 2. Teoria de cómo funciona DOM. El resto viene con imaginación.

Tambien podrias usar la propiedad background-image de css por medio del javascript... aunque es menos útil, pues es menos usable para el usuario. +1 a la respuesta de JP

Una solución fácil es simplemente es que la vuelta sea tipo responseText (del objeto XMLHTTP) y que el archivo generado por lado del servidor te genere algo así:

Código :

<img src='asdf.jpg' alt='Imagen 1' />

Y colocar en el código Javascript algo así:

Código :

//Una vez ya recibida la respuesta del servidor y todo eso
document.getElementById('caja').innerHTML = http.responseText
//Tienes que cambiar de class a id, ya que es 
//mucho más fácil(nos evitamos los arrays con getElementsByTagName)

PD: Que raro que te salieron puros caracteres, seguramente hiciste lo mismo que acá pero talvez te equivocaste con los tags(en este caso 'img').
PD_2: La otra solución es la de NEO_JPG

[off-topic]

NEO is lossy bitmap data!
[/off-topic]

usar iframes y llamar a esa web "a la 2.0" por Dios!!!!!!!!!!!!!!!!!!
Simplemente pones la imagen:

Código :

<img src="imagen.jpg" id="imagenCambiante"/>

luego el javascript.

Código :

function cambiaImagen(nuevaImagen){
     imagenid=document.getElementById("imagenCambiante");
     imagen.src=nuevaImagen;
}

Luego la llamada a la funcion con el evento onclik

Código :

<a href="#" onclick="cambiaImagen('imagen2.jpg');">imagen2</a>

** edito por que en la carrera por terminar el post antes de salir de clase escribi todo mal...

Errr..eso no te va ni a validar ni a servir. Sería:

Código :

... onclick="cambiaImagen('imagen2.jpg');">

Pero eso asumiendo que se va a usar javascript obtrusivo... que no es recomendable. Usa la solución de NEO_"JPG"

si, ya no pude terminar mi post, estava en la escuela y la clase ya havia terminado...

lo que continuava del post era:

Esta solucion es una solucion muy rudimentaria pero que puede servir, hay formas sencillas de no fregarle la usabilidad al usuario si este no tiene javascript.

Veamos una prueba rápida con jquery.

Código :

$('#nav a').click(function(){
  var imgUrl = $(this).attr('href');
  $('#img').attr('src',imgUrl);
  return false;
});

Y listo.

Claro, así si el usuario no tiene javascript, aun así podrá ir a la imagen aun que no de la forma que tu quieres.

yo supongo que el enlace lo harías de forma normal.

Código :

<a href="imagen.jpg">imagen</a>

y como dige antes eso se puede hacer también con javascript, sin usar jQuerry.

Te recomiendo leas el libro
"Dom scripting" de Friends of ED.