efecto a Capa Div

mixzplit · #1 (**permalink**) 18/06/2011, 10:14

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<?php
session_start();
if(!isset($_SESSION['us_id'])){
header("Location: ../index.php"); 
} else {
$usuario=$_SESSION['us_id'];
$admin=$_SESSION['us_tipo'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Graficos Estadisticos</title>
    <link rel=stylesheet href="./Style/default.css" type="text/css">
    <link rel=stylesheet href="./Style/menuH.css" type="text/css">
</head>
    <script LANGUAGE="javascript">
    function oculta(){
     document.getElementById('mostrar').style.display = "none";
    }
    function muestra(){
     document.getElementById('mostrar').style.display = "block";
    }
    
     function ocultar(){
     document.getElementById('titulo').style.display = "none";
    }
    
    function mostrar(){
     document.getElementById('titulo').style.display = "block";
    }
    function ocultar_ver(){
     document.getElementById('ver').style.display = "none";
    }
     function mostrar_ver(){
     document.getElementById('ver').style.display = "block";
    }
    
    
    </script>
 
<body>
<?php
    include('menu.php');
?>
<div align="center" id="titulo"> <strong> GRAFICOS ESTADISTICOS DE TAREAS TERMINADAS</strong> 
<div><img src="graficos/graph_tarea_dia.php" alt="" border="0"></div>
</div>
 
<div align="center" onclick="muestra(); ocultar(); ocultar_ver()" style="cursor:pointer"> <strong> <label id="ver">(vea)</label> GRAFICO ESTADISTICO POR RECURSO</strong> </div>
  <div id="mostrar" style="display:none">
   <img src="graficos/graph_tarea_recurso.php" alt="" border="0"> </br>
  
  <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>
</div>
</body>
</html>
<? } ?>

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

Espero puedan ayudarme con esto

Saludos

alexg88 · #2 (**permalink**) 18/06/2011, 10:35

Puedes usar fadeOut y fadeIn para hacerlo menos tosco:

Código Javascript:

Ver original<div align="center" id="titulo"> <strong> GRAFICOS ESTADISTICOS DE TAREAS TERMINADAS</strong> 
<div><img src="graficos/graph_tarea_dia.php" alt="" border="0"></div>
</div>
 
    <div align="center" onclick="$('#mostrar').fadeIn();$('#titulo').fadeOut();$('#ver').fadeOut();" style="cursor:pointer"> <strong> <label id="ver">(vea)</label> GRAFICO ESTADISTICO POR RECURSO</strong> </div>
  <div id="mostrar" style="display:none">
   <img src="graficos/graph_tarea_recurso.php" alt="" border="0"> </br>
  
  <span id="cerrar"  style="color:#000; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size:17px">Cerrar Grafico <label onclick="$('#mostrar').fadeOut(); $('#titulo').fadeIn();$('#ver').fadeIn();" style="cursor:pointer">[X]</label></span>
</div>

mixzplit · #3 (**permalink**) 22/06/2011, 04:47

Hola alexg88, muchas gracias, me sirivio mucho tu ayuda,

Saludos