22/05/2011, 17:33
|
| | Fecha de Ingreso: octubre-2010 Ubicación: Buenos Aires
Mensajes: 126
Antigüedad: 14 años, 2 meses Puntos: 11 | |
Problema con Divs para un Slideshow 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} |