Hola otra vez:
De tirar la toalla... nanai...
Metí el script en tu página y modifiqué pocas cosillas (las que te apunté anteriormente) y puse una página de pruebas aquí:
http://www.pepemolina.com/acaser/planosan.html
... pero ten en cuenta que tienes que trabajarla tú mismo...
He visto que algunas fotos (mapas) tienen distinto tamaño... te recomiendo que las hagas iguales.
El código del popup quedó así:
Código PHP:
<html>
<head>
<script>
var dibujos;
var nFilas = 5;
var nColumnas = 11;
function subir() {
if (actual > (nColumnas - 1)) {
actual -= nColumnas;
document.images.centro.src = dibujos[actual].src;
}
}
function bajar() {
if (actual < ((nFilas - 1) * (nColumnas))) {
actual += nColumnas;
document.images.centro.src = dibujos[actual].src;
}
}
function izq() {
if ((actual % nColumnas) > 0) {
actual -= 1;
document.images.centro.src = dibujos[actual].src;
}
}
function der() {
if ((actual % nColumnas) < (nColumnas - 1)) {
actual += 1;
document.images.centro.src = dibujos[actual].src;
}
}
function precarga() {
var imagenes = new Array(precarga.arguments.length)
for (var i = 0; i < imagenes.length; i ++) {
imagenes[i] = new Image();
imagenes[i].src = precarga.arguments[i];
}
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]);
document.images.centro.src = _dibujos[actual];
dibujos = new precarga(
'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'
);
}
</script>
</head>
<body onload="ini()" style="margin: 0;">
<table border=1 >
<tr>
<td> </td>
<td style="text-align: center" onclick="subir()"> ↑ </td>
<td> </td>
</tr>
<tr>
<td style="valign: middle" onclick="izq()" > ← </td>
<td style="text-align: center"><img name="centro" src=""></td>
<td style="valign: middle" onclick="der()" > → </td>
</tr>
<tr>
<td> </td>
<td style="text-align: center" onclick="bajar()" >↓ </td>
<td> </td>
</tr>
</table>
</body>
</html>
Fíjate que la precarga está detrás de la selección para que tarde menos en mostrarse el mapa actual...
Se puede optimizar, pero "paciencia"... cuando te funcione veremos como mejorarlo.
Saludos
