galeria imagenes

mitrofan · #1 (**permalink**) 06/02/2013, 14:38

Hola, sería muy complicado hacer lo siguiente:

Por ejemplo tengo una web en la que debo mostrar articulos, y en cada articulo cargar varias imagenes. La imagen principal aparecería en grande a un lado (dentro de un div principal por ejemplo), mientras que las imagenes secundarias aparecerían en otro lado (en otro div por ejemplo) pero más pequeñas. Quiero que al pasar el ratón por cualquiera de las imágenes pequeñas automáticamente aparezcan esas imagenes en el div principal en grande, y asi sucesivamente. ¿esto es factible de hacer? ¿es complicado? No tengo mucha idea de javascript, ¿algun codigo similar que conozcais? también había pensado hacerl en php+ajax.

Un saludo.

IsaBelM · #2 (**permalink**) 07/02/2013, 08:33

no es necesario usar javascript. se puede hacer con puro css

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}

html, body {
width: 100%;
height: 100%;
}

a {outline: 0;}

div#cont {
width: 150px;
padding: 100px 0 0 0; /* alto de la imagen */
border: 1px solid red;
}

div#cont a {
display: block;
}

div#cont div#cont_img img {
display: none;
}

div#cont div#cont_img img#i1 {
display: block;
position: absolute;
left: 0;
top: -300px;
}

div#cont a:hover ~ div#cont_img {
display: block;
left: 0;
top: -300px;
}

div#cont a:hover#l1 ~ div#cont_img img#i1, div#cont a:hover#l2 ~ div#cont_img #i2, div#cont a:hover#l3 ~ div#cont_img img#i3, div#cont a:hover#l4 ~ div#cont_img img#i4 {
display: block;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>

<div id="cont">

<a id="l1" href="#"><img src ="img1.png" id="l1" width="50px" height="50px" alt="" /></a>
<a id="l2" href="#"><img src ="img2.png" id="l2" width="50px" height="50px" alt="" /></a>
<a id="l3" href="#"><img src ="img3.png" id="l3" width="50px" height="50px" alt="" /></a>
<a id="l4" href="#"><img src ="img4.png" id="l4" width="50px" height="50px" alt="" /></a>

<div id="cont_img">

<img src ="img1.png" id="i1" width="150px" height="100px" alt="" />
<img src ="img2.png" id="i2" width="150px" height="100px" alt="" />
<img src ="img3.png" id="i3" width="150px" height="100px" alt="" />
<img src ="img4.png" id="i4" width="150px" height="100px" alt="" />

</div>

</div>

</body>
</html>