Hola otra vez:
La verdad es que había dado clases hace unos años, pero siempre se sabe el nivel del alumno, así que es algo difícil ir de "catedrático", pero trataré de ayudarte.
Supongo que el algoritmo se verá mejor con la definición de 2 constantes que representen el nº de filas y de columnas:
var nFilas = 3; // o el valor que necesites.
var nColumnas = 5; // por ejemplo...
Y usamos estas constantes en las funciones subir, bajar, izq y der:
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;
}
}
Dime si te vas enterando y mañana seguimos.
Lo del mapeado de las imágenes esta bien, luego solo tienes que darle un valor correlativo a la función zona, que se debe pasar como parámetro.
Saludos