cargar pagina dentro de mi home

[rascabuchitos]

hola amigos
tengo esta web http://fenicia.org/desplazamiento/
y me gustaria que al darle click por ejemplo al color celeste que es una imagen se cargue ahi mismo otra pagina sin modificar la url , con la descripcion de la imagen celeste con el mismo efecto que estoy teniendo en el home para la aparicion de todas las imagenes

alguien podria darme unos tips
o recomendar algun manual para lograr mi objetivo?


gracias

[djaevi]

Te recomendaria que tengas un div aparte que sea para las descripciones entonces al clickear tu imagen lo haces aparecer con el metodo fadeIn() de jquery x ejemplo:

Supongamos que estos son tus divs que muestran las fotos

Código HTML:

<div class="imagenMini" onclick="info('celeste')"><img src='celeste.jpg'></div>
<div class="imagenMini" onclick="info('negro')"><img src='negro.jpg'></div> 
<div class="imagenMini" onclick="info('rosa')"><img src='rosa.jpg'></div>
<div class="imagenMini" onclick="info('verde')"><img src='verde.jpg'></div> 
<div class="imagenMini" onclick="info('azul')"><img src='azul.jpg'></div>
<div class="imagenMini" onclick="info('blanco')"><img src='blanco.jpg'></div>
 

Ahora supongamos que ademas tengas un div con la misma clase (tamaño etc) pero sin la imagen dentro porque lo usaras solo para texto y por defecto lo pondras oculto, ademas deberas agregarle un id para llamarlo desde jquery:

Código HTML:

<div class="imagenMini" id="divOculto" style="display:none;"></div>
 

Entonces ahora esta seria la funcion info de javascript que recuerda iria entre las etiquetas head

Código Javascript:

function info(color) {
    $.ajax({
        method:"POST",
        url:"tu_archivo_conectado_a_base_de_datos",
        data:{color:color},
        success:function(resp) {
            $("#divOculto").fadeOut("slow");
            $("#divOculto").html(resp);
            $("#divOculto").fadeIn("slow");
        }
    })
}
 

Esta funcion lo que haria es enviar el color seleccionado a un archivo que procese la peticion a una base de datos (PHP,ASP el que uses) y devuelva el mensaje (variable resp) entonces una vez hecho esto simplemente haces primero un fadeOut (ocultar div, si es la primera vez que el usuario pincha no interesa porque si el div esta oculto simplemente lo ignorara, luego le cargas al div la informacion recibida y finalmente lo muestras con fadeIn();

Probalo aver si te resulta facil de realizar y cualquier duda me avisas

Salu2

[rascabuchitos]

muchas gracias por el dato djaevi
ahora lo pruebo