Tema: Problema con javascript y display
Ver Mensaje Individual
  #11 (permalink)  
Antiguo 09/02/2013, 15:26
Avatar de legomolina
legomolina
 
Fecha de Ingreso: junio-2011
Ubicación: Valencia
Mensajes: 165
Antigüedad: 13 años, 6 meses
Puntos: 3
Respuesta: Problema con javascript y display
Aqui te dejo el codigo de la pag. Aun falta por añadir varias cosillas.

Codigo de la pag:
Código HTML: 
Ver original
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <link href="estilo/clasicosprueba.css" rel="Stylesheet" type="text/css" />
  6.  
  7. <script language="javascript" type="text/javascript">
  8. function menus_desplegable(k) {
  9.     
  10.     var d=document.getElementById("descripcion");
  11.     var i=document.getElementById("info");
  12.     var r=document.getElementById("requisitos");
  13.     var m=document.getElementById("multimedia");
  14.     
  15.     switch(k) {
  16.     case 1:
  17.         d.style.display="block";
  18.         i.style.display="none";
  19.         r.style.display="none";
  20.         m.style.display="none";
  21.         break;
  22.         
  23.     case 2:
  24.         d.style.display="none";
  25.         i.style.display="block";
  26.         r.style.display="none";
  27.         m.style.display="none";
  28.         break;
  29.         
  30.     case 3:
  31.         d.style.display="none";
  32.         i.style.display="none";
  33.         r.style.display="block";
  34.         m.style.display="none";
  35.         break;
  36.         
  37.     case 4:
  38.         d.style.display="none";
  39.         i.style.display="none";
  40.         r.style.display="none";
  41.         m.style.display="block";
  42.         break;
  43.             
  44.     default:
  45.         d.style.display="block";
  46.         i.style.display="none";
  47.         r.style.display="none";
  48.         m.style.display="none";
  49.         break;
  50.  
  51.     }
  52. }
  53.  
  54. </script>
  55. </head>
  56.  
  57. <body>
  58.     <!-- Tabla contenedora  100%-width -->
  59.     <table class="table_container">
  60.         <tr>
  61.             <td>
  62.                 <!-- Contenedor de los botones del menu 60px-heigth; fixed-position -->
  63.                 <div class="menu_button_container">
  64.                     <table>
  65.                         <!-- cada boton 20%-width -->
  66.                         <tr>
  67.                             <td class="menu_button">
  68.                                 <img src="ima/boton/accion1.png" onmouseout="this.src='ima/boton/accion1.png'" onmouseover="this.src='ima/boton/accion2.png'" />
  69.                             </td>
  70.                             <td class="menu_button">
  71.                                 Aventura
  72.                             </td>
  73.                             <td class="menu_button">
  74.                                 <img src="ima/boton/conduccion1.png" onmouseout="this.src='ima/boton/conduccion1.png'" onmouseover="this.src='ima/boton/conduccion2.png'" />
  75.                             </td>
  76.                             <td class="menu_button">
  77.                                 <img src="ima/boton/plataformas1.png" onmouseout="this.src='ima/boton/plataformas1.png'" onmouseover="this.src='ima/boton/plataformas2.png'" />
  78.                             </td>
  79.                             <td class="menu_button">
  80.                                 Varios
  81.                             </td>
  82.                         </tr>
  83.                     </table>
  84.                 </div>
  85.                 <!-- Contenedor principal alojado justo abajo de los botones -->
  86.                 <div class="main_frame_container">
  87.                     
  88.                     <!-- Botones descripcion, info, requisitos, multimedia -->
  89.                     <div class="game_buttons">
  90.                         <a href="#" onClick="menus_desplegable(1);" ><img title="Ver descripcion" alt="Ver descripcion" src="ima/iconos/iconodescripcion.png" onmouseover="this.src='ima/iconos/iconodescripcion2.png'" onmouseout="this.src='ima/iconos/iconodescripcion.png'" /></a>
  91.                         <a href="#" onClick="menus_desplegable(2);" ><img title="Ver informacion" alt="Ver informacion" src="ima/iconos/iconoinfo.png" onmouseover="this.src='ima/iconos/iconoinfo2.png'" onmouseout="this.src='ima/iconos/iconoinfo.png'" /></a>
  92.                         <a href="#" onClick="menus_desplegable(3);" ><img title="Ver requisitos minimos" alt="Ver requisitos minimos" src="ima/iconos/iconorequisitos.png" onmouseover="this.src='ima/iconos/iconorequisitos2.png'" onmouseout="this.src='ima/iconos/iconorequisitos.png'" /></a>
  93.                         <a href="#" onClick="menus_desplegable(4);" ><img title="Ver multimedia" alt="Ver multimedia" src="ima/iconos/iconomultimedia.png" onmouseover="this.src='ima/iconos/iconomultimedia2.png'" onmouseout="this.src='ima/iconos/iconomultimedia.png'" /></a>
  94.                     </div>
  95.                     
  96.                     <div class="menus_desplegable" id="descripcion">
  97.                     Descripción.
  98.                     </div>
  99.                     
  100.                     <div class="menus_desplegable" id="info">
  101.                     <table width="100%">
  102.                                 <tr>
  103.                                     <td style="width:30%">
  104.                                         Desarrollador:
  105.                                     </td>
  106.                                     <td>
  107.                                         Desarrollador respuesta
  108.                                     </td>
  109.                                     
  110.                                 </tr>
  111.                                 <tr>
  112.                                     <td>
  113.                                         Distribuidor:
  114.                                     </td>
  115.                                     <td>
  116.                                         Distribuidor respuesta
  117.                                     </td>
  118.                                     
  119.                                 </tr>
  120.                                 <tr>
  121.                                     <td>
  122.                                         Plataformas:
  123.                                     </td>
  124.                                     <td>
  125.                                         Plataformas respuesta
  126.                                     </td>
  127.                                 </tr>
  128.                             </table>
  129.                 </div>
  130.                 <div class="menus_desplegable"  id="requisitos">
  131.                     <table width="100%">
  132.                                 <tr>
  133.                                     <td>
  134.                                         Sistema operativo:
  135.                                     </td>
  136.                                     <td>
  137.                                         Sistema operativo respuesta
  138.                                     </td>
  139.                                     <td>
  140.                                         Memoria RAM:
  141.                                     </td>
  142.                                     <td>
  143.                                         Memoria RAM respuesta
  144.                                     </td>
  145.                                     <td>
  146.                                         Procesador:
  147.                                     </td>
  148.                                     <td>
  149.                                         Procesador respuesta
  150.                                     </td>
  151.             
  152.                                 </tr>
  153.                                 <tr>
  154.                                     <td>
  155.                                         Disco Duro:
  156.                                     </td>
  157.                                     <td>
  158.                                         Disco Duro respuesta
  159.                                     </td>
  160.                                     <td>
  161.                                         Tarjeta de sonido:
  162.                                     </td>
  163.                                     <td>
  164.                                         Tarjeta de sonido respuesta
  165.                                     </td>
  166.                                     <td>
  167.                                         CD/DVD:
  168.                                     </td>
  169.                                     <td>
  170.                                         CD/DVD respuesta
  171.                                     </td>
  172.             
  173.                                 </tr>
  174.                                 <tr>
  175.                                     <td>
  176.                                         Periféricos:
  177.                                     </td>
  178.                                     <td>
  179.                                         Periféricos respuesta
  180.                                     </td>
  181.                                     <td>
  182.                                         DirectX:
  183.                                     </td>
  184.                                     <td>
  185.                                         DirectX respuesta
  186.                                     </td>
  187.                                     <td>
  188.                                         Tarjeta gráfica:
  189.                                     </td>
  190.                                     <td>
  191.                                         Tarjeta gráfica respuesta
  192.                                     </td>
  193.             
  194.                                 </tr>
  195.                             </table>
  196.                 </div>
  197.                 <div class="menus_desplegable" id="multimedia">
  198.                     <table width="100%">
  199.                         <tr>
  200.                             <td>
  201.                                 Imagenes
  202.                             </td>
  203.                         </tr>
  204.                         <tr>
  205.                             <td>
  206.                                 Videos
  207.                             </td>
  208.                         </tr>
  209.                     </table>
  210.                 </div>
  211.                 </div>
  212.             </td>
  213.         </tr>
  214.     </table>
  215. </body>
  216. </html>


Codigo del archivo clasicosprueba.css
Código CSS: 
Ver original
  1. /* CSS Document */
  2. .table_container {
  3.     width:100%;
  4. }
  5. .menu_button {
  6.     width: 20%;
  7. }
  8. .menu_button_container {
  9.     position: fixed;
  10.     height: 60px;
  11.     background-color: #36F;
  12.     top: 0px;
  13.     left: 0px;
  14.     width: 100%;
  15. }
  16. .main_frame_container {
  17.     left: 0px;
  18.     top: 60px;
  19.     position: absolute;
  20.     width: 100%;
  21. }
  22. .game_buttons {
  23.     background-color: #39C;
  24. }
  25. .menus_desplegable{
  26.     position: relative;
  27.     margin:15px;
  28.     visibility: hidden;
  29. }