Hola buenas, muevo este tema aquí por que lo puse en HTML y CSS pero creo que aquí queda mejor, mi problema es que e puesto un pase de diapositivas en mi pagina web y en Chrome me va lentísimo, 7-8 segundos en cargar cada imagen desde que doy a la miniatura hasta que sale en grande, y lo que me parece mas raro es que en Mozilla y Explorer funcionen a la perfección, os dejo el código para que le podáis echar un vistazo
CÓDIGO HTML:
<html>
<head>
<LINK REL="stylesheet" TYPE="text/css" HREF="miEstilo.css">
<META HTTP-EQUIV="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<div id="galeria">
<div id="galeria_imagen">
<img id="imgGaleria" src="images/simbolos/1.jpg" /></div>
<div id="galeria_miniaturas">
<img class="miniatura" onclick="javascript:document.getElementById('imgGa leria').src='images/simbolos/1.jpg';" src="images/simbolos/1.jpg" />
<img class="miniatura" onclick="javascript:document.getElementById('imgGa leria').src='images/simbolos/2.jpg';" src="images/simbolos/2.jpg" />
<img class="miniatura" onclick="javascript:document.getElementById('imgGa leria').src='images/simbolos/3.jpg';" src="images/simbolos/3.jpg" />
<img class="miniatura" onclick="javascript:document.getElementById('imgGa leria').src='images/simbolos/6.jpg';" src="images/simbolos/6.jpg" />
<img class="miniatura" onclick="javascript:document.getElementById('imgGa leria').src='images/simbolos/7.jpg';" src="images/simbolos/7.jpg" />
<img class="miniatura" onclick="javascript:document.getElementById('imgGa leria').src='images/simbolos/20.jpg';" src="images/simbolos/20.jpg" />
<img class="miniatura" onclick="javascript:document.getElementById('imgGa leria').src='images/simbolos/23.jpg';" src="images/simbolos/23.jpg" />
<img class="miniatura" onclick="javascript:document.getElementById('imgGa leria').src='images/simbolos/24.jpg';" src="images/simbolos/24.jpg" />
<img class="miniatura" onclick="javascript:document.getElementById('imgGa leria').src='images/simbolos/25.jpg';" src="images/simbolos/25.jpg" />
<img class="miniatura" onclick="javascript:document.getElementById('imgGa leria').src='images/simbolos/26.jpg';" src="images/simbolos/26.jpg" />
<img class="miniatura" onclick="javascript:document.getElementById('imgGa leria').src='images/simbolos/27.jpg';" src="images/simbolos/27.jpg" />
<img class="miniatura" onclick="javascript:document.getElementById('imgGa leria').src='images/simbolos/30.jpg';" src="images/simbolos/30.jpg" />
<img class="miniatura" onclick="javascript:document.getElementById('imgGa leria').src='images/simbolos/32.jpg';" src="images/simbolos/32.jpg" />
<a href="catalogoSimbolos2.html"><img class="miniatura" src="images/flechaD.png" width="x" height="x"/></a>
</div>
</body>
</html>
CÓDIGO CSS:
#galeria, #galeria * {box-sizing:border-box,-moz-box-sizing:border-box}
#galeria {
padding-bottom: 0;
background: white; /* Fondo de la galería */
width: 65%; /* Ancho de la galería */
margin-left:31%;
margin-top:20%;
position:absolute;
}
#galeria_miniaturas {
display: table;
margin: 0 auto;
position:absolute;
margin-top:0%;
}
#imgGaleria {
border: 1px solid #F2F2F2; /* Borde de la imagen */
padding: 0.5%;
width: x; /* Ancho de la imagen */
height: x; /* Alto de la imagen */
width:60%;
position:absolute;
margin-top:23%;
margin-left:18%;
}
.miniatura {
width: 9%; /* Ancho de las miniaturas */
height: 200%; /* Alto de las miniaturas */
float: left;
cursor: pointer;
padding: 0px;
margin: 1% 1%;
}
.miniatura:hover {
opacity:.8; /* Opacidad */
-moz-opacity:.8;
-khtml-opacity:.8;
filter:alpha(opacity=80);
}
.miniatura:active {
opacity:1;
-moz-opacity:1;
-khtml-opacity:1;
filter:alpha(opacity=80);
}
Un saludo y gracias de antemano
