Buenas,
Le he echado un vistazo a tu código y mas o menos tengo una solución que seria lo siguiente:
Tendrías que hacer una función para cada movimiento, el cual se tendría que visualizar su posición según sea vertical o horizontal en cada momento que presionas los botones.
Para saber la posición de un DIV con ID se utilizaría : element.offsetTop o element.offsetLeft.
Y para el movimiento , con un simple un simple element.style.top o element.style.left
vendría perfecto.
Para que lo entiendas mejor, te muestro el código.
Código HTML:
<html>
<head>
<style type="text/css">
#base-map {
position:absolute;
left:0;
top:0;
width:500px;
height:320px;
z-index:1;
background-color: #CCCCCC;
}
#user-1 {
position:absolute;
left:0px;
top:0px;
width:15px;
height:21px;
z-index:2;
}
#apDiv1 {
position:absolute;
left:514px;
top:18px;
width:103px;
height:85px;
z-index:3;
}
</style>
<script type="text/javascript">
function abajo(){
var posicionActual=document.getElementById("user-1").offsetTop;
posicion = posicionActual + 16;
var abajo = document.getElementById("user-1").style.top=posicion;
}
function arriba(){
var posicionActual=document.getElementById("user-1").offsetTop;
posicion = posicionActual - 16;
var arriba = document.getElementById("user-1").style.top=posicion;
}
function izquierda(){
var posicionActual=document.getElementById("user-1").offsetLeft;
posicion = posicionActual - 16;
var izquierda = document.getElementById("user-1").style.left=posicion;
}
function derecha(){
var posicionActual=document.getElementById("user-1").offsetLeft;
posicion = posicionActual + 16;
var derecha = document.getElementById("user-1").style.left=posicion;
}
</script>
</head>
<body>
<div id="base-map"></div>
<div id="user-1"><img src="http://static4.wikia.nocookie.net/__cb20110104210317/mario/es/images/d/d4/Champi%C3%B1%C3%B3n_M%26LVCB.png" width="16" height="21"></div>
<div id="apDiv1">
<table width="200" border="1">
<tr>
<td> </td>
<td onclick="arriba()">arriba</td>
<td> </td>
</tr>
<tr>
<td onclick="izquierda()">izquierda</td>
<td> </td>
<td onclick="derecha()">derecha</td>
</tr>
<tr >
<td> </td>
<td onclick="abajo()">abajo</td>
<td> </td>
</tr>
</table>
</div>
</body>
</html> Dime que tal te fue
