Tema: onclick y visibility, se establecen valores iniciales
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 05/08/2011, 06:18
Henkka
 
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