Tema: efecto a Capa Div
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 18/06/2011, 10:14
mixzplit
 
Fecha de Ingreso: enero-2011
Ubicación: Maracaibo
Mensajes: 179
Antigüedad: 13 años, 10 meses
Puntos: 2
efecto a Capa Div
Hola compañeros del Foro del Web, vuelvo aqui para pedir ayuda con las capas div, no soy muy habil con JavaScript y siempre termino pidiendo ayuda.

Tengo varias capas div, donde al cargar la pagina me muestra un grafico realizado con jpgraph y en la parte de abajo coloque otro div donde al hacer click me oculta la primera grafica y me muestra la segunda, hasta ahi todo me funciona perfecto.

La cuestion es que el cambio de una grafica a otro se ve muy violento, y quisiera saber como darle efecto a mi codigo, no se como meterle jquery a este codigo:

Código HTML: 
Ver original
  1. <?php
  2. session_start();
  3. if(!isset($_SESSION['us_id'])){
  4. header("Location: ../index.php"); 
  5. } else {
  6. $usuario=$_SESSION['us_id'];
  7. $admin=$_SESSION['us_tipo'];
  8. ?>
  9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  10. <html xmlns="http://www.w3.org/1999/xhtml">
  11. <head>
  12. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  13. <title>Graficos Estadisticos</title>
  14.     <link rel=stylesheet href="./Style/default.css" type="text/css">
  15.     <link rel=stylesheet href="./Style/menuH.css" type="text/css">
  16. </head>
  17.     <script LANGUAGE="javascript">
  18.     function oculta(){
  19.      document.getElementById('mostrar').style.display = "none";
  20.     }
  21.     function muestra(){
  22.      document.getElementById('mostrar').style.display = "block";
  23.     }
  24.     
  25.      function ocultar(){
  26.      document.getElementById('titulo').style.display = "none";
  27.     }
  28.     
  29.     function mostrar(){
  30.      document.getElementById('titulo').style.display = "block";
  31.     }
  32.     function ocultar_ver(){
  33.      document.getElementById('ver').style.display = "none";
  34.     }
  35.      function mostrar_ver(){
  36.      document.getElementById('ver').style.display = "block";
  37.     }
  38.     
  39.     
  40.     </script>
  41.  
  42. <body>
  43. <?php
  44.     include('menu.php');
  45. ?>
  46. <div align="center" id="titulo"> <strong> GRAFICOS ESTADISTICOS DE TAREAS TERMINADAS</strong> 
  47. <div><img src="graficos/graph_tarea_dia.php" alt="" border="0"></div>
  48. </div>
  49.  
  50. <div align="center" onclick="muestra(); ocultar(); ocultar_ver()" style="cursor:pointer"> <strong> <label id="ver">(vea)</label> GRAFICO ESTADISTICO POR RECURSO</strong> </div>
  51.   <div id="mostrar" style="display:none">
  52.    <img src="graficos/graph_tarea_recurso.php" alt="" border="0"> </br>
  53.   
  54.   <span id="cerrar"  style="color:#000; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size:17px">Cerrar Grafico <label onclick="oculta(); mostrar(); mostrar_ver()" style="cursor:pointer">[X]</label></span>
  55. </div>
  56. </body>
  57. </html>
  58. <? } ?>

No soy muy bueno en JavaScript y el codigo pueder de un novato

Espero puedan ayudarme con esto


Saludos