Foros del Web » Creando para Internet » CSS »

Problema con Divs para un Slideshow

Estas en el tema de Problema con Divs para un Slideshow en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 22/05/2011, 17:33
 
Fecha de Ingreso: octubre-2010
Ubicación: Buenos Aires
Mensajes: 126
Antigüedad: 14 años, 1 mes
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}
  #2 (permalink)  
Antiguo 24/05/2011, 04:52
Avatar de slide22  
Fecha de Ingreso: mayo-2011
Ubicación: Madrid
Mensajes: 17
Antigüedad: 13 años, 6 meses
Puntos: 0
Respuesta: Problema con Divs para un Slideshow

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.

Última edición por slide22; 25/05/2011 a las 01:22

Etiquetas: capas, divs, slideshow
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 19:52.