Foros del Web » Creando para Internet » HTML »

onclick y visibility, se establecen valores iniciales

 Estas en el tema de onclick y visibility, se establecen valores iniciales en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/08/2011, 05:25
 
Fecha de Ingreso: agosto-2011
Mensajes: 2
Antigüedad: 12 años, 8 meses
Puntos: 0
onclick y visibility, se establecen valores iniciales
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!!!
  #2 (permalink)  
Antiguo 05/08/2011, 06:18
 
Fecha de Ingreso: abril-2008
Ubicación: Santa Fe, Argentina
Mensajes: 41
Antigüedad: 16 años
Puntos: 14
Respuesta: onclick y visibility, se establecen valores iniciales
En qué navegador? En Firefox 5.0 funciona correctamente. De todas formas no explicás demasiado bien cual es el comportamiento, y cual debería ser.

Al cargar la página muestra una imagen con fondo blanco. Al clickear los botones, muestra otras imágenes con otros colores de fondo.

Tener un código válido suele ahorrarte muchos problemas. Existen validadores HTML/XHTML y CSS que reportan si es válido, y sino cuales son los problemas.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/validator

Al inicio del documento te falta un doctype. Elegí transitional así podés usar style dentro de los tags.
http://es.wikipedia.org/wiki/Declaraci%C3%B3n_de_tipo_de_documento

Para el javascript, dentro de la etiqueta utilizamos el atributo type="text/javascript", y no language. El código javascript siempre debe estar dentro de comentarios HTML o secciones CDATA.
http://www.w3.org/TR/xhtml1/#h-4.8

No uses los elementos <form> e <input> si semánticamente no son parte de un formulario. Existe un elemento llamado <button>, que semánticamente es un botón.

Las imágenes deben tener atributo alt, y no debe estar vacío. El atributo name no existe. Es redundante especificar width y height en la etiqueta si ya lo hiciste anteriormente para el elemento en el CSS. Moví la propiedad background-color a la declaración para el selector.
http://www.w3schools.com/tags/tag_IMG.asp


Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Documento sin t&iacute;tulo</title>
  7. <style type="text/css">
  8. .Botones {
  9.         font-family: Impact;
  10.         font-size: 16px;
  11.         font-style: oblique;
  12.         line-height: normal;
  13.         font-weight: lighter;
  14.         color: #03F;
  15.         background-color: #999;
  16.         letter-spacing: normal;
  17.         text-align: center;
  18.         vertical-align: middle;
  19.         height: 40px;
  20.         width: 100px;
  21.         border: medium double #000;
  22.         cursor: crosshair;
  23.         word-spacing: normal;
  24.         visibility: visible;
  25. }
  26. .posicionamiento {
  27.         background-position: center center;
  28.         overflow: visible;
  29. }
  30. #apDiv1 {
  31.         position:absolute;
  32.         width:547px;
  33.         height:316px;
  34.         z-index:1;
  35.         left: 241px;
  36.         top: 156px;
  37.         visibility: visible;
  38. }
  39. #apDiv2 {
  40.         position:absolute;
  41.         width:547px;
  42.         height:400px;
  43.         z-index:2;
  44.         left: 241px;
  45.         top: 156px;
  46.         visibility: hidden;
  47.     background-color: #0000FF;
  48. }
  49. #apDiv3 {
  50.         position:absolute;
  51.         width:547px;
  52.         height:400px;
  53.         z-index:3;
  54.         left: 241px;
  55.         top: 156px;
  56.         visibility: hidden;
  57.     background-color: #FFFF00;
  58. }
  59. #apDiv4 {
  60.         position:absolute;
  61.         width:547px;
  62.         height:400px;
  63.         z-index:4;
  64.         left: 241px;
  65.         top: 156px;
  66.         visibility: hidden;
  67.     background-color: #FF0000;
  68. }
  69. #apDiv5 {
  70.         position:absolute;
  71.         width:547px;
  72.         height:400px;
  73.         z-index:5;
  74.         left: 241px;
  75.         top: 156px;
  76.         visibility: hidden;
  77.     background-color: #00FF00;
  78. }
  79. </style>
  80. <script type="text/javascript">
  81. /* <![CDATA[ */
  82. function mostrar(num){
  83. for (i=1;i<6;i++)
  84.         if(i>num || i<num){
  85.             document.getElementById('apDiv'+i).style.visibility = 'hidden' ;
  86.         }
  87.         else{
  88.                 document.getElementById('apDiv'+i).style.visibility = 'visible' ;
  89.         }
  90. }
  91. /* ]]> */
  92. </script>
  93. </head>
  94. <body>
  95. <div align="center">
  96.     <button class="Botones" onclick="mostrar('1');">Inicio</button>
  97.     <button class="Botones" onclick="mostrar('2');">Juegos</button>
  98.     <button class="Botones" onclick="mostrar('3');">Soporte</button>
  99.     <button class="Botones" onclick="mostrar('4');">Contacto</button>
  100.     <button class="Botones" onclick="mostrar('5');">VoIP</button>
  101.     <div id="apDiv1"><img src="inicio.jpg" alt="Inicio" id="Tab_inicio" /></div>
  102.     <div id="apDiv2"><img src="juegos.jpg" alt="Juegos" id="Tab_juegos" /></div>
  103.     <div id="apDiv3"><img src="soporte.jpg" alt="Soporte" id="Tab_soporte" /></div>
  104.     <div id="apDiv4"><img src="contacto.jpg" alt="Contacto" id="Tab_contacto" /></div>
  105.     <div id="apDiv5"><img src="voip.jpg" alt="VoIP" id="Tab_voip" /></div>
  106. </div>
  107. </body>
  108. </html>
Última edición por Henkka; 05/08/2011 a las 06:31
  #3 (permalink)  
Antiguo 05/08/2011, 06:54
 
Fecha de Ingreso: agosto-2011
Mensajes: 2
Antigüedad: 12 años, 8 meses
Puntos: 0
Respuesta: onclick y visibility, se establecen valores iniciales
vale, he corregido el form y ya funciona en todos los exploradores. me apunto lo k me has dicho que seguro me viene bien en un futuro. la pagina no esta acabada por eso esta extraño lo de colores y formas XD
muchisimas gracias hennka!!! me has salvado!!! saludos!!

Etiquetas: javascript, onclick, reinicia, visibility, botones
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 08:53.