Problema funcion para alterar el Left y Top de un Div

PabloFerran · #1 (**permalink**) 29/12/2010, 08:34

Vereis, estoy haciendo algo con HTML CSS y JS para pasar el rato. Es simplemente un fondo negro con una Cara encima. Debajo cuatro botones. Cada botón mueve la carita hacia un lado. He hecho todo y cuando he ido a probar mi proyecto había algo que no funcionaba:
Solo cambia de posicion ( la carita) 2 veces. Además no se puede repetir 2 veces el mismo botón. Alguna solucion?
Os dejo el código para que veais los errores.
HTML:

Código:

<html>
<head>
<title>Troll Move</title>
<link rel="stylesheet" type="text/css" href="troll.css">
<script language="javascript" src="troll.js" type="text/javascript"></script>
</head>
<body>
<div class="tablero"></div>
<div id="troll"></div>
<div class="mando">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
</td>
<td><input type="button" value="o" onclick="arriba()">
</td>
<td>
</td>
</tr>
<tr>
<td><input type="button" value="o" onclick="izquierda()">
</td>
<td>
</td>
<td><input type="button" value="o" onclick="derecha()">
</td>
</tr>
<tr>
<td>
</td>
<td><input type="button" value="o" onclick="abajo()">
</td>
<td>
</td>
</tr>
</table>
</div>
</body>
</html>

CSS:

Código:

div.tablero{
background-color:black;
position:absolute;
top:0px;
left:0px;
visibility:visible;
z-index:1;
width:324px;
height:324px;
}

#troll{
background-image:url('trollface.JPG');
position:relative;
top:0px;
left:0px;
visibility:visible;
z-index:2;
width:54px;
height:54px;
}

div.mando{
position:relative;
visibility:visible;
z-index:3;
top:180px;
left:200px;
}

JS:

Código:

function arriba(){
var spencer=document.getElementById('troll')
spencer.style.top-='54px'
}

function izquierda(){
var spencer=document.getElementById('troll')
spencer.style.left-='54px'
}

function derecha(){
var spencer=document.getElementById('troll')
spencer.style.left+='54px'
}

function abajo(){
var spencer=document.getElementById('troll')
spencer.style.top+='54px'
}

Espero que me podais ayudar. Gracias de antemano