Problema con Divs para un Slideshow

[maximilianojcelis]

Buenas muchachos.. mi problema es el siguiente.. Estoy creando un Slideshow con html y css.. Maquetado de la siguiente manera.. Un div contenedor principal.. Y luego lo tengo separado en 2.. Una parte es donde se muestra la imagen en grande con el contenido.. y a la derecha 4 imagenes miniaturas que hacen de menu.. Lo que quiero lograr y no puedo es que, al apretar en la imagen miniatura que hace de menu.. Me salga el div con el contenido que corresponda a esa imagen.. Las 4 imagenes miniaturas aparecen pero el div con el contenido no cambia.. Los div del contenido tienen position absolute, por lo que se muestra uno encima del otro y siempre veo el mismo.. me gustaria qe al seleccionar una miniatura aparesca el div qe deseo.. Que estilo tengo que aplicar para lograrlo? Saludos..


El codigo es el siguiente:

<div ID="galeria">
<div id="contenido">
<div id="big1"><img src="imagenes/1194954140_f.jpg" width="495 height="415"" /></div>

<div id="big2"><img src="imagenes/1200753672_f.jpg" width="495" height="415" /></div>

<div id="big3"><img src="imagenes/5708253333_d5385848dc.jpg" width="495" height="415" /></div>

<div id="big4"><img src="imagenes/ona_ld.jpg" width="495" height="415" /></div>
</div>

<div id="menu">
<div id="img1"><img src="imagenes/mini1.jpg" width="170" height="100"/></div>

<div id="img2"><img src="imagenes/mini2.gif" width="170" height="100"/></div>

<div id="img3"><img src="imagenes/mini3.jpg" width="170" height="100"/></div>

<div id="img4"><img src="imagenes/mini4.jpg" width="170" height="100"/></div>
</div>
</div>

Y el css lo tengo asi..

#galeria {width: 680px; height: 415px}
#contenido {width: 495px; height: 415px; position:relative; float:left}
#menu { width:185px; height:415x; float:left}
#img1 { width:170px; height:100px; margin:0px 5px 5px 9px}
#img2 { width:170px; height:100px; margin:5px 5px 5px 9px}
#img3 { width:170px; height:100px; margin:5px 5px 5px 9px}
#img4 { width:170px; height:100px; margin:5px 5px 0px 9px}

#big1 { width:495px; height:415px; position: absolute}
#big2 { width:495px; height:415px; position:absolute}
#big3 { width:495px; height:415px; position:absolute}
#big4 { width:495px; height:415px; position:absolute}

[slide22]

Muy buenas.

Te propongo una solucion un poco distinta de lo que tienes. En ver de tener cuatro divs con una imagen cada una te propongo que tengas un solo div con una imagen cuyo atributo src sea "". A traves de javascript cambias el valor del atributo src cada vez que haces click en una imagen del menu.

El javascript seria una cosa asi:

function click(src){
$('#div_unico').attr('src', src);
}

y el html quedaria asi:

<div ID="galeria">
<div id="contenido">
<div id="div_unico"><img src="" width="495 height="415"" /></div>
</div>

<div id="menu">
<div id="img1" onclick="click('imagenes/1194954140_f.jpg')"><img src="imagenes/mini1.jpg" width="170" height="100"/></div>

<div id="img2" onclick="click('imagenes/1200753672_f.jpg')"><img src="imagenes/mini2.gif" width="170" height="100"/></div>

<div id="img3" onclick="click('imagenes/5708253333_d5385848dc.jpg')"><img src="imagenes/mini3.jpg" width="170" height="100"/></div>

<div id="img4" onclick="click('imagenes/ona_ld.jpg')"><img src="imagenes/mini4.jpg" width="170" height="100"/></div>
</div>
</div>

tendrias que añadir en el head la libreria de JQuery que puedes sacar de aqui: http://docs.jquery.com/Main_Page

Espero que te sirva.