Te lo paso todo entero...para que lo veas... es todo el html, lo ejecutas y ves como funciona.
<html>
<head>
<title>CentaCapes</title>
<style type="text/css">
#inici{position: absolute; visibility:hidden; left:400px; top:250px; z-index:3;
background-color:#ff9900; border-width:4; border-style:ridge; border-color:#c0c0c0;
padding:10}
#finalB{position: absolute; visibility:hidden; left:700px; top:200px; z-index:3;
background-color:#ff9900; border-width:4; border-style:ridge; border-color:#c0c0c0;
padding:10}
#apuesta{position: absolute; visibility:hidden; left:120px; top:120px; z-index:3;
background-color:#ff9900; border-width:4; border-style:ridge; border-color:#c0c0c0;
padding:10}
#finalJ {position: absolute; visibility:hidden; left:10px; top:300px; z-index:3;
background-color:#ff9900; border-width:4; border-style:ridge; border-color:#c0c0c0;
padding:10}
</style>
<script language="JavaScript">
var ie = (document.all)?true:false;
var ns6 = ((document.getElementById)?true:false) && !ie;
if(ie)//si es internet explorer el ancho y el alto se indican de esta manera
{
var ancho=document.body.clientWidth/2;
var alto=document.body.clientHeight/2;
}
if (ns6)//Si es Firefox el alto y el ancho se indican de esta manera
{
var ancho=window.innerWidth/2;
var alto=window.innerHeight/2;
}
function capaON(pNomCapa)//Funcion que muestra la capa por pantalla al apretar qualquier boton del 1 al 4
{
document.getElementById(pNomCapa).style.visibility = 'visible';
}
function capaOFF(pNomCapa)//funcion que hace que se vaya la capa al apretar el boton de tancar
{
document.getElementById(pNomCapa).style.visibility = 'hidden';
}
function centraCapes(pNomCapa)
{
var anchocapa=document.getElementById(pNomCapa).offset Width/2;//guardo en una variable el ancho de la capa /2
var altocapa=document.getElementById(pNomCapa).offsetH eight/2;//guardo en una variable el alto de la capa /2
//alert("width : " + anchocapa + " px\nheight : " + altocapa + " px")
var result=ancho-anchocapa;//distancia entre el left y la capa
var resultado=alto-altocapa;//distancia entre el top y la capa
capaON(pNomCapa);
document.getElementById(pNomCapa).style.left = result;//la capa tiene como posición result
document.getElementById(pNomCapa).style.top = resultado;//la capa tiene como posición resultado
}
</script>
</head>
<body bgcolor="#ffffcc">
<form>
<span id="finalJ">
<h1>Partida finalitzada</h1>
<h2 align="center">Perd vostè</h2>
</span>
<span id="finalB">
<h1>Partida acabada</h1>
<h2 align="center">Vostè ha guanyat</h2>
</span>
<span id="inici">
<table cellspacing="5" cellpadding="0">
<tr>
<td colspan="2"><B>Amb quant diners desitges<br>començar la partida</B></td>
</tr>
<tr>
<td align="center"><input type="text" maxlength="6" size="6" name="entrada"></td>
<td align="center"><input type="button" value="Ok" onclick="recollirDiners(this.form)"></td>
</tr>
</table>
</span>
<span id="apuesta">
<table cellspacing="5" cellpadding="0">
<tr>
<td colspan="3" align="right"><b>Quantitat:</b></td>
<td colspan="3"><input type="text" maxlength="6" size="6" name="quant"></td>
</tr>
<tr>
<th colspan="6">Aposta per:</th>
</tr>
<tr>
<td><input type="radio" value="0" name="qcranc"></td><td><img src="images/cranc0.gif"></td>
<td><input type="radio" value="1" name="qcranc"></td><td><img src="images/cranc1.gif"></td>
<td><input type="radio" value="2" name="qcranc"></td><td><img src="images/cranc2.gif"></td>
</tr>
<tr>
<td><input type="radio" value="3" name="qcranc"></td><td><img src="images/cranc3.gif"></td>
<td><input type="radio" value="4" name="qcranc"></td><td><img src="images/cranc4.gif"></td>
<td colspan="2" align="right"><input type="button" value="Ok" onclick="recollirApuesta(this.form)"></td>
</tr>
</table>
</span>
<table cellspacing="10" cellpadding="10" align="center">
<tr>
<td><input type='button' value='Capa 1' onclick="capaON('finalJ');centraCapes('finalJ')"></td>
<td><input type='button' value='Capa 2' onclick="capaON('finalB');centraCapes('finalB')"></td>
</tr>
<tr>
<td><input type='button' value='Capa 3' onclick="capaON('inici');centraCapes('inici')"></td>
<td><input type='button' value='Capa 4' onclick="capaON('apuesta');centraCapes('apuesta')" ></td>
<td><input type='button' value='Centrar Capa' onclick="centraCapes('apuesta')"></td>
</tr>
<tr>
<td colspan="2"><input type='button' value='Tancar' onclick="capaOFF('finalJ');capaOFF('finalB');capaO FF('inici');capaOFF('apuesta')"></td>
</tr>
</table>
</form>
</body>
</html>
