Hola otra vez:
Tengo un poco gripado mi servidor, así que no puedo subir las últimas modificaciones, con una precarga selectiva un poco mejorada, el código es:
Código PHP:
<html>
<head>
<style type="text/css" >
td {
text-align : center;
valign : middle;
}
.flechaActiva {
border : 2px outset;
background-color : #eeeeee;
color : black;
}
.flechaInActiva {
border : 2px dashed;
background-color : #eeeeee;
color : #fefefe;
}
</style>
<script>
var dibujos, _dibujos;
var nFilas = 5;
var nColumnas = 11;
var actual, siguientes;
var botones = ["arr", "der", "aba", "izq"];
function calcularSiguientes(actual) {
var _siguientes = "";
for (var i = 0; i < botones.length; i ++)
document.getElementById(botones[i]).className = "flechaInActiva";
if (actual > (nColumnas - 1)) _siguientes += "arr=" + (actual - nColumnas);
if ((actual % nColumnas) < (nColumnas - 1)) _siguientes +=
(_siguientes == "") ? "der=" + (actual + 1):
",der=" + (actual + 1);
if (actual < ((nFilas - 1) * (nColumnas)))
_siguientes += (_siguientes == "") ?
"aba=" + (actual + nColumnas):
",aba=" + (actual + nColumnas);
if ((actual % nColumnas) > 0) _siguientes += ",izq=" + (actual - 1);
return _siguientes;
}
function precargar(dibus) {
arrayDibus = dibus.split(",");
var nuevaPrecarga = "precargar('";
var siguientesDibujos = ""
for (var i = 0; i < arrayDibus.length; i ++) {
sitio = parseInt(arrayDibus[i].split("=")[1]);
if (dibujos[sitio].imagen.complete)
with (document.getElementById(arrayDibus[i].split("=")[0]))
className = "flechaActiva";
else siguientesDibujos += (siguientesDibujos == "") ?
arrayDibus[i] : "," + arrayDibus[i];
}
if (siguientesDibujos != "") {
var nuevaPrecarga = "precargar('" + siguientes + "')";
setTimeout(nuevaPrecarga, 100);
}
}
function subir() {
actual -= nColumnas;
document.images.centro.src = dibujos[actual].imagen.src;
siguientes = calcularSiguientes(actual);
dibujos = sumarPrecarga(siguientes, dibujos);
precargar(siguientes);
}
function bajar() {
actual += nColumnas;
document.images.centro.src = dibujos[actual].imagen.src;
siguientes = calcularSiguientes(actual);
dibujos = sumarPrecarga(siguientes, dibujos);
precargar(siguientes);
}
function izq() {
actual -= 1;
document.images.centro.src = dibujos[actual].imagen.src;
siguientes = calcularSiguientes(actual);
dibujos = sumarPrecarga(siguientes, dibujos);
precargar(siguientes);
}
function der() {
actual += 1;
document.images.centro.src = dibujos[actual].imagen.src;
siguientes = calcularSiguientes(actual);
dibujos = sumarPrecarga(siguientes, dibujos);
precargar(siguientes);
}
function precargaSelectiva() {
this.imagen = new Image();
}
function sumarPrecarga(elementos, dibujos) {
var desglose = elementos.split(",");
for (var i = 0; i < desglose.length; i ++) {
j = parseInt(desglose[i].split("=")[1]);
dibujos[j].imagen.src = _dibujos[j];
}
return dibujos;
}
function nuevaPrecarga(n) {
var imagenes = new Array(n);
for (var i = 0; i < imagenes.length; i ++)
imagenes[i] = new precargaSelectiva();
return imagenes;
}
function ini() {
_dibujos = new Array(
'http://webs.ono.com/usr028/turiscan/images/a1.jpg',
'http://webs.ono.com/usr028/turiscan/images/a2.jpg',
'http://webs.ono.com/usr028/turiscan/images/a3.jpg',
'http://webs.ono.com/usr028/turiscan/images/a4.jpg',
'http://webs.ono.com/usr028/turiscan/images/a5.jpg',
'http://webs.ono.com/usr028/turiscan/images/a6.jpg',
'http://webs.ono.com/usr028/turiscan/images/a7.jpg',
'http://webs.ono.com/usr028/turiscan/images/a8.jpg',
'http://webs.ono.com/usr028/turiscan/images/a9.jpg',
'http://webs.ono.com/usr028/turiscan/images/a10.jpg',
'http://webs.ono.com/usr028/turiscan/images/a11.jpg',
'http://webs.ono.com/usr028/turiscan/images/b1.jpg',
'http://webs.ono.com/usr028/turiscan/images/b2.jpg',
'http://webs.ono.com/usr028/turiscan/images/b3.jpg',
'http://webs.ono.com/usr028/turiscan/images/b4.jpg',
'http://webs.ono.com/usr028/turiscan/images/b5.jpg',
'http://webs.ono.com/usr028/turiscan/images/b6.jpg',
'http://webs.ono.com/usr028/turiscan/images/b7.jpg',
'http://webs.ono.com/usr028/turiscan/images/b8.jpg',
'http://webs.ono.com/usr028/turiscan/images/b9.jpg',
'http://webs.ono.com/usr028/turiscan/images/b10.jpg',
'http://webs.ono.com/usr028/turiscan/images/b11.jpg',
'http://webs.ono.com/usr028/turiscan/images/c1.jpg',
'http://webs.ono.com/usr028/turiscan/images/c2.jpg',
'http://webs.ono.com/usr028/turiscan/images/c3.jpg',
'http://webs.ono.com/usr028/turiscan/images/c4.jpg',
'http://webs.ono.com/usr028/turiscan/images/c5.jpg',
'http://webs.ono.com/usr028/turiscan/images/c6.jpg',
'http://webs.ono.com/usr028/turiscan/images/c7.jpg',
'http://webs.ono.com/usr028/turiscan/images/c8.jpg',
'http://webs.ono.com/usr028/turiscan/images/c9.jpg',
'http://webs.ono.com/usr028/turiscan/images/c10.jpg',
'http://webs.ono.com/usr028/turiscan/images/c11.jpg',
'http://webs.ono.com/usr028/turiscan/images/d1.jpg',
'http://webs.ono.com/usr028/turiscan/images/d2.jpg',
'http://webs.ono.com/usr028/turiscan/images/d3.jpg',
'http://webs.ono.com/usr028/turiscan/images/d4.jpg',
'http://webs.ono.com/usr028/turiscan/images/d5.jpg',
'http://webs.ono.com/usr028/turiscan/images/d6.jpg',
'http://webs.ono.com/usr028/turiscan/images/d7.jpg',
'http://webs.ono.com/usr028/turiscan/images/d8.jpg',
'http://webs.ono.com/usr028/turiscan/images/d9.jpg',
'http://webs.ono.com/usr028/turiscan/images/d10.jpg',
'http://webs.ono.com/usr028/turiscan/images/d11.jpg',
'http://webs.ono.com/usr028/turiscan/images/e1.jpg',
'http://webs.ono.com/usr028/turiscan/images/e2.jpg',
'http://webs.ono.com/usr028/turiscan/images/e3.jpg',
'http://webs.ono.com/usr028/turiscan/images/e4.jpg',
'http://webs.ono.com/usr028/turiscan/images/e5.jpg',
'http://webs.ono.com/usr028/turiscan/images/e6.jpg',
'http://webs.ono.com/usr028/turiscan/images/e7.jpg',
'http://webs.ono.com/usr028/turiscan/images/e8.jpg',
'http://webs.ono.com/usr028/turiscan/images/e9.jpg',
'http://webs.ono.com/usr028/turiscan/images/e10.jpg',
'http://webs.ono.com/usr028/turiscan/images/e11.jpg'
);
actual = parseInt(location.search.split("=")[1]);
if ((actual).toString() != "NaN") {
document.images.centro.src = _dibujos[actual];
dibujos = nuevaPrecarga(_dibujos.length);
siguientes = calcularSiguientes(actual);
dibujos = sumarPrecarga(siguientes, dibujos);
precargar(siguientes);
}
}
</script>
</head>
<body onload="ini()" style="margin: 0;">
<table border=1 >
<tr>
<td> </td>
<td id="arr" class="flechaInActiva" onclick="if (this.className == 'flechaActiva') subir()"> ↑ </td>
<td> </td>
</tr>
<tr>
<td id="izq" class="flechaInActiva" onclick="if (this.className == 'flechaActiva') izq()" > ← </td>
<td >
<div style="width: 469px; height: 469px; overflow: hidden;">
<img name="centro" src="" />
</div>
</td>
<td id="der" class="flechaInActiva" onclick="if (this.className == 'flechaActiva') der()" > → </td>
</tr>
<tr>
<td> </td>
<td id="aba" class="flechaInActiva" onclick="if (this.className == 'flechaActiva') bajar()" >↓ </td>
<td> </td>
</tr>
</table>
</body>
</html>
En cuanto se le baje la fiebre a mi servidor, subo la página para que la veas.
Saludos
