Basado en el slider acordeón de
dos filas x 5 imágenes, he modificado el código para ampliar las imágenes.
En primer lugar hay que colocar
este primer código, pero en realidad no tengo claro para que sirve porque yo lo
he hecho sin él y me ha funcionado igual, por eso lo he separado del resto del código.
Es decir, se puede probar primero sin
poner este código y si no funciona entonces se pega esto delante de los demás:
<!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">
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Documento sin
título</title>
Este segundo código es el del
estilo donde se colocan las direcciones o url de cada imagen. Aquí hay que
sustituir lo que está en rojo por la dirección de la imagen. He señalado también
en azul el contenedor total de la tabla por si se quiere modificar.
<style type="text/css">
<!--
body {
background: #e2e2e2 url(https://lh4.googleusercontent.com/5lq26FE8Q08/T14X6urDoHI/AAAAAAAAAYc/HxOCtz028-A/s6/bg.png)
repeat;
margin:0;
}
/* for the tables
version */
.acordeon {
border-collapse:collapse;
padding:0px;
margin:0px
auto;
width:750px;
height:400px;
box-shadow:
0 0 5px #333;
}
.acordeon td {
padding:0;
width:136px;
height:117px;
border:2px
solid #fff;
-moz-transition:
0.7s;
-ms-transition:
0.7s;
-o-transition:
0.7s;
-webkit-transition:
0.7s;
transition:
0.7s;
}
.acordeon td.p1
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsHcy59qx-a8N5kgWy9eOnK1ZK00KInCGc6L88innSRfdtaQftIuMkyTA7a0FjgVxRoa-Ps4LiGx6iogHFtmLiVvFXHSeUKuP5QsAQoC3AC4mokhIyx_yMSotnfReeGwvmDydTMkaU9Lma/s1600/TRABAJO+FINAL+FINAL.jpg) no-repeat center center;}
.acordeon td.p2
{background:url(http://4.bp.blogspot.com/Z5uyfjCXlro/VEzhTVg3jaI/AAAAAAAAASI/UJe5Q-kWicM/s1600/18%2BLLUVIA%2BCON%2BNIEVE.jpg) no-repeat center center;}
.acordeon td.p3
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_14tgya8lrA8er3OoXTp1YhHuuYOpQ1TbV5UgJ_3YNBTsTw1WIMhjkYEACSVHPgR4kn63kqTR_RaSIC3eXdAIL6QXaUSSQ1l3vNsr7ud_EYuycYZ75Pcstil3z-MsYYrLXXeflr4mlVw/s1600/07+EFECTO+POP+ART+EVA2222.jpg) no-repeat center center;}
.acordeon td.p4
{background:url(http://4.bp.blogspot.com/-j-0z6FTzXo/VEziar_2UsI/AAAAAAAAASg/y1VrjEooVxY/s1600/85548112_My3am0y_1401174606.jpg) no-repeat center center;}
.acordeon td.p5
{background:url(http://4.bp.blogspot.com/Z5uyfjCXlro/VEzhTVg3jaI/AAAAAAAAASI/UJe5Q-kWicM/s1600/18%2BLLUVIA%2BCON%2BNIEVE.jpg) no-repeat center center;}
.acordeon td.p6
{background:url(https://lh6.googleusercontent.com/-_dtMmSY3rgA/T2UU0ffbRhI/AAAAAAAAAaw/5K4uGfS9_SU/s500/nice-abstract.jpg) no-repeat center center;}
.acordeon td.p7
{background:url(http://3.bp.blogspot.com/-OfXNMsWQF1k/VEzhRsm0CI/AAAAAAAAASA/g_oqcW8XJf0/s1600/07%2BEFECTO%2BPOP%2BART%2BEVA2222.jpg) no-repeat center center;}
.acordeon td.p8
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieEXL0zLDKrRFKEVgGJZvqz_3GwR2L5u-frKh7ZvSdseGnNt4QKBECfsyoqv_Kv7TvpJYu9NmXNOH4Dr9cym8BLZzkEsgs9RB04tPoPuFjkQyRc2ftCaByveTKzYlkzPdZufIxx_EOBfTR/s1600/24+TRABAJO+FINAL+X.jpg) no-repeat center center;}
.acordeon td.p9
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwhiSrA969Y8-hSoExrckfBdFK-pFEaFxWLNI7MD8vjq0S7ou10VDh4NPnC9SqKrNb08d5RxLyCPiZgRj5reAxfVUt5Iv-vCZyzn4kl4iLnrsq1upSm3dqxT1ib4YLXhnXxYvX_AHSWDU/s1600/85548112_My3am0y_1401174606.jpg) no-repeat center center;}
.acordeon td.p10
{background:url(http://4.bp.blogspot.com/-x-L6EPQdj2o/VDp7EnNdQI/AAAAAAAAAMI/N5nuVCrFNDU/s1600/TRABAJO%2BFINAL%2BFINAL.jpg) no-repeat center center;}
.acordeon td.p11
{background:url(http://4.bp.blogspot.com/-x-L6EPQdj2o/VDp7EnNdQI/AAAAAAAAAMI/N5nuVCrFNDU/s1600/TRABAJO%2BFINAL%2BFINAL.jpg) no-repeat center center;}
.acordeon td.p12
{background:url(http://4.bp.blogspot.com/Z5uyfjCXlro/VEzhTVg3jaI/AAAAAAAAASI/UJe5QkWicM/s1600/18%2BLLUVIA%2BCON%2BNIEVE.jpg) no-repeat center center;}
.acordeon td.p13
{background:url(http://3.bp.blogspot.com/OfXNMsWQF1k/VEzhRsm0CI/AAAAAAAAASA/g_oqcW8XJf0/s1600/07%2BEFECTO%2BPOP%2BART%2BEVA2222.jpg) no-repeat center center;}
.acordeon td.p14
{background:url(http://4.bp.blogspot.com/j0z6FTzXo/VEziar_2UsI/AAAAAAAAASg/y1VrjEooVxY/s1600/85548112_My3am0y_1401174606.jpg) no-repeat center center;}
.acordeon td.p15
{background:url(http://4.bp.blogspot.com/Z5uyfjCXlro/VEzhTVg3jaI/AAAAAAAAASI/UJe5QkWicM/s1600/18%2BLLUVIA%2BCON%2BNIEVE.jpg) no-repeat center center;}
.acordeon td.p16
{background:url(https://lh6.googleusercontent.com/_dtMmSY3rgA/T2UU0ffbRhI/AAAAAAAAAaw/5K4uGfS9_SU/s500/nice-abstract.jpg) no-repeat center center;}
.acordeon td.p17
{background:url(http://3.bp.blogspot.com/-OfXNMsWQF1k/VEzhRsm0CI/AAAAAAAAASA/g_oqcW8XJf0/s1600/07%2BEFECTO%2BPOP%2BART%2BEVA2222.jpg) no-repeat center center;}
.acordeon td.p18
{background:url(http://1.bp.blogspot.com/M5F7qD6AiDE/VC043XNDGzI/AAAAAAAAAHU/btqkgkTt7Y0/s1600/24%2BTRABAJO%2BFINAL%2BX.jpg) no-repeat center center;}
.acordeon td.p19
{background:url(http://4.bp.blogspot.com/j0z6FTzXo/VEziar_2UsI/AAAAAAAAASg/y1VrjEooVxY/s1600/85548112_My3am0y_1401174606.jpg) no-repeat center center;}
.acordeon td.p20
{background:url(http://4.bp.blogspot.com/xL6EPQdj2o/VDp7EnNdQI/AAAAAAAAAMI/N5nuVCrFNDU/s1600/TRABAJO%2BFINAL%2BFINAL.jpg) no-repeat center center;}
.acordeon td
{width:50px; height:50px;}
.acordeon tr:hover
td {height:320px;}
.acordeon td:hover
{width:480px; height:320px;}
h1 {
font-family:consolas,
arial, sans-serif;
font-size:50px;
color:#999999;
text-shadow:#fff
0px 1px 0, #333 0 -1px 0;
font-weight:
bold;
margin: 20px
0;
letter-spacing:-1px;
}
-->
</style></head>
Y la tercera parte del código que corresponde
al body.
<body>
<h1
align="center">
Acordeon
de Imagenes CHULAS</h1>
<table
class="acordeon">
<tbody>
<tr>
<td
class="p1 c1"></td>
<td
class="p10"></td></tr>
</tbody>
</table>
</body>
</html>
Por ultimo ya solo queda cambiar el titulo de la tabla (o quitarlo)
- y cambiar el título del acordeón.
- y si se quiere suprimir --> borrar esta linea (Acordeon de Imagenes CHULAS</h1>)
No hay comentarios:
Publicar un comentario