Código PHP:
<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:0;
top:0;
width:16px;
height:21px;
z-index:2;
background: url(poke_images/users/0_.gif);
}
#apDiv1 {
position:absolute;
left:514px;
top:18px;
width:103px;
height:85px;
z-index:3;
}
#apDiv2 {
position:absolute;
left:48px;
top:48px;
width:16px;
height:22px;
z-index:1;
background-color: #FFFFFF;
}
</style>
<script type="text/javascript">
function abajo(){
var posiciony=document.getElementById("user-1").offsetTop;
posicion = posiciony + 16;
var abajo = document.getElementById("user-1").style.top=posicion;
}
function arriba(){
var posiciony=document.getElementById("user-1").offsetTop;
posicion = posiciony - 16;
var arriba = document.getElementById("user-1").style.top=posicion;
}
function izquierda(){
var posicionx=document.getElementById("user-1").offsetLeft;
posicion = posicionx - 16;
var izquierda = document.getElementById("user-1").style.left=posicion;
}
function derecha(){
var posicionx=document.getElementById("user-1").offsetLeft;
posicion = posicionx + 16;
var derecha = document.getElementById("user-1").style.left=posicion;
}
</script>
</head>
<body>
<div id="base-map"></div>
<div id="user-1"></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> <div id="apDiv2"></div>
</body></html>
con este codigo puedo hacer que el sprite (div) se pueda mover al presionar las flechas en un px de 16x16, hasta ahi todo bien ... pero quisiera saber como puedo hacer para que cuando este en la cordenada px 48x48 se active cualquier div que se encuentre oculta ... porfavor espero su pronto respuesta, grecias de antemano