Hola!
Estoy diseñando una web y me da el siguiente problema:
al pulsar uno de los botones la capa correspondiente a cada boton deveria cambiar su visibility a "Hidden" menos la que corresponde al boton que cambia a "visible". pero al dar al boton lo hace fugazmente y vuelve a valores iniciales dejando que se vea solo la capa correspondiente al boton "inicio"
necesito ayuda urgente porfavor!
este es el codigo:
Código HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#form1 div {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.Botones {
font-family: Impact;
font-size: 16px;
font-style: oblique;
line-height: normal;
font-weight: lighter;
color: #03F;
background-color: #999;
letter-spacing: normal;
text-align: center;
vertical-align: middle;
height: 40px;
width: 100px;
border: medium double #000;
cursor: crosshair;
word-spacing: normal;
visibility: visible;
}
.posicionamiento {
background-position: center center;
overflow: visible;
}
#apDiv1 {
position:absolute;
width:547px;
height:316px;
z-index:1;
left: 241px;
top: 156px;
visibility: visible;
}
#apDiv2 {
position:absolute;
width:547px;
height:400px;
z-index:2;
left: 241px;
top: 156px;
visibility: hidden;
}
#apDiv3 {
position:absolute;
width:547px;
height:400px;
z-index:3;
left: 241px;
top: 156px;
visibility: hidden;
}
#apDiv4 {
position:absolute;
width:547px;
height:400px;
z-index:4;
left: 241px;
top: 156px;
visibility: hidden;
}
#apDiv5 {
position:absolute;
width:547px;
height:400px;
z-index:5;
left: 241px;
top: 156px;
visibility: hidden;
}
</style>
<script language="javascript">
function mostrar(num){
for (i=1;i<6;i++)
if(i>num || i<num){
document.getElementById('apDiv'+i).style.visibility = 'hidden' ;
}
else{
document.getElementById('apDiv'+i).style.visibility = 'visible' ;
}
}
</script>
</head>
<body>
</p>
<form id="form1" name="form1" method="post" action="">
<div align="center">
<input name="Bot_inicio" type="submit" class="Botones" id="Bot_inicio" value="Inicio" onclick=
"mostrar('1');" />
<input name="Bot_juegos" type="submit" class="Botones" id="Bot_juegos" value="Juegos" onclick="mostrar('2');" />
<input name="Bot_soporte" type="submit" class="Botones" id="Bot_soporte" value="Soporte" onclick=
"mostrar('3');" />
<input name="Bot_contacto" type="submit" class="Botones" id="Bot_contacto" value="Contacto" onclick=
"mostrar('4');" />
<input name="Bot_voip" type="submit" class="Botones" id="Bot_voip" value="Voip" onclick=
"mostrar('5');" />
<div id="apDiv1"><img src="inicio.jpg" alt="" name="Tab_inicio" width="547" height="400" align="absmiddle" id="Tab_inicio" /></div>
<div id="apDiv2"><img src="juegos.jpg" alt="" name="Tab_juegos" width="547" height="400" id="Tab_juegos" style="background-color: #0000FF" /></div>
<div id="apDiv3"><img src="soporte.jpg" alt="" name="Tab_soporte" width="547" height="400" id="Tab_soporte" style="background-color: #FFFF00" /></div>
<div id="apDiv4"><img src="contacto.jpg" alt="" name="Tab_contacto" width="547" height="400" id="Tab_contacto" style="background-color: #FF0000" /></div>
<div id="apDiv5"><img src="voip.jpg" alt="" name="Tab_voip" width="547" height="400" id="Tab_voip" style="background-color: #00FF00" /></div>
</div>
</form>
</body>
</html> mil gracias!!!