ocultar mostrar div...

jlgarcia1977 · #1 (**permalink**) 25/02/2009, 07:34

Tengo un div, que abro al pinchar una imagen:

<a href="#" onclick="visualizarParametrosBusqueda();"><img src="img/iconos/cambiar.gif"></a>

function visualizarParametrosBusqueda() {
document.getElementById("divbusqueda").style.displ ay='block';
}

Y que oculto a pinchar en otra:

<td colspan="6" align="right"><a href="#" onclick="ocultarParametrosBusqueda();"><img src="img/iconos/cerrar.gif"></a>

function ocultarParametrosBusqueda() {
document.getElementById("divbusqueda").style.displ ay='none';
}

Lo que necesito es hacer que desde una imagen y solo una, al pincha me muestre el div si este esta oculto, y si esta oculto me lo muestre.

Muchas gracias.

mdk · #2 (**permalink**) 25/02/2009, 07:45

Metes esta linea para la imagen:

Código HTML:

<a href="#" onclick="MostrarOcultar();"><img src="img/iconos/imagen.gif"></a>

y en el javascript haces esto:

Código:

estado = 'on'; // variable blobal inicial para que lo muestre;
function MostrarOcultar() {
	if (estado == on) { 
		document.getElementById("divbusqueda").style.display='none';
		estado = 'off';
	}
	else {
		document.getElementById("divbusqueda").style.display='block';
		estado = 'on';
	}
}

Seria algo asi.

jseros · #3 (**permalink**) 25/02/2009, 09:15

Saludos. Otra alternativa:

Código HTML:

<a href="#" onclick="MostrarOcultar( this );"><img src="img/iconos/imagen.gif"></a>

Código PHP:

  function MostrarOcultar( obj ) 
{ 
      //establecemos un atributo para verficar el estado del elemento 
      //en el caso de que se necesite utilizan la funcion en mas de uno 
      if( obj.getAttribute( "$oculto" ) ) 
      { 
           obj.style.display = ""; 
           obj.setAttribute( "$oculto" , 0 ); 
      } 
      else 
      { 
           obj.style.display = "none"; 
           obj.setAttribute( "$oculto" , 1 ); 
      } 
       return true; 
}

Exitos.

SPAWN3000 · #4 (**permalink**) 25/02/2009, 11:11

Yo había creado esto... es algo mas corto.

Código PHP:

  <html>
<head>
<script>
function xVisible(idTag) {
    var DTag = document.getElementById(idTag);
    DTag.style.display=(DTag.style.display!='none')?'none':'';
    //Title
}
</script>
</head>
<body>
<div id="d1">hola</div>
<a href="#" onclick="xVisible('d1')">Visible/novisible</a>
</body>
</html>

Pero falta definir una variable de imagen...
Cambia esta línea: DTag.style.display!='none', por validar el alt de la imagen, y te servirá para dos tipos.

Superlinux · #5 (**permalink**) 25/02/2009, 21:31

tengo por defecto la capa1 .. si doy clic me muestra la capa2 .. si doy otro clic nuevamente nuevamente la capa1 ...

????

Superlinux · #6 (**permalink**) 25/02/2009, 22:01

ehh logre hacer algo asi ...

Código PHP:

 
<script type="text/javascript"> 
  function toggle(lay1,lay2){ 
   d1 = document.getElementById(lay1); 
   d2 = document.getElementById(lay2); 
   d1.style.display= d1.style.display!='none'? d1.style.display='none': d1.style.display=''; 
   d2.style.display= d1.style.display!='none'? d2.style.display='none': d2.style.display=''; 
  } 
</script> 
  
<script type="text/javascript"> 
    function mostrar(blo) { 
    document.getElementById(blo).style.display=VISIBLE ; 
    document.getElementById('ver_off').style.display=V ISIBLE; 
    document.getElementById('ver_on').style.display=OC ULTO; 
   } 
</script> 
 
                <div align="center"> 
                <div id="div1" style="visibility:visible; overflow:hidden;"> 
                <iframe src="maps.cgi?id=<?=$maps[idMapa] ?>" frameborder="0"  scrolling="no" name="mapa"  width="755" height="338"></iframe>     
                  </div> 
                  <div id="div2" style="visibility:visible; overflow:hidden;"> 
                     <?php include("articulos_especialistas.php") ?> 
                </div> 
                </div>

pero tengo un problemita ... necesito que cuando cargue por primera vez la pagina solo me muestre el

Código PHP:

 
 <div id="div2" style="visibility:visible; overflow:hidden;"> 
                     <?php include("articulos_especialistas.php") ?> 
                </div>

Gracias por la ayuda ...

mdk · #7 (**permalink**) 26/02/2009, 00:11

Pues deja mostrado ese div nada mas se cargue la pagina, o directamente , o haciendo que se vuelva visible con un onload.

Superlinux · #8 (**permalink**) 26/02/2009, 07:47

la verdad soy nuevo trabajando con div .... podrias indicarme como ???

SPAWN3000 · #9 (**permalink**) 26/02/2009, 08:08

mmm, creo que haces malas practicas...

1. Existe una diferencia clave entre visibility y display, si utilizas visibility el objeto mantiene su poción solo que no puede verse, pero este espacio ocupado por el objeto es constante...si se utiliza display, este espacio desaparece(Hago la aclaración a todos ellos que utilizan visibility) Pienso que es mejor utilizar display, me parece una mejor practica, ademas de ser mas compatible con las versiones anteriores de IE.

2. existen muchas versiones de la función toggle(Es muy común), pero puede haber una forma mas optima de escribir la que tu tienes... Mi función hace parte de mi librería AJAX, y sólo son 2 líneas(y hace 2 acciones:mostrar y ocultar)-sencillo.

<script type="text/javascript">
function xVisible(idTag) {
var DTag = document.getElementById(idTag);
DTag.style.display=(DTag.style.display!='none')?'n one':'';
}
</script>

Superlinux · #10 (**permalink**) 26/02/2009, 09:33

ya casi lo tengo con la funcion display ...

Código PHP:

 
<script> 
// definiciones basicas 
OCULTO="none"; 
VISIBLE="block"; 
     
function mostrar(blo) { 
  document.getElementById(blo).style.display=VISIBLE; 
  document.getElementById('ver_off').style.display=VISIBLE; 
  document.getElementById('ver_on').style.display=OCULTO; 
} 
  
function ocultar(blo) { 
  document.getElementById(blo).style.display=OCULTO; 
  document.getElementById('ver_off').style.display=OCULTO; 
  document.getElementById('ver_on').style.display=VISIBLE; 
} 
</script> 
 
<div align="center"> 
                  <div id="capa1" style="display: visible"> 
                    <?php include("articulos_especialistas.php") ?> 
                  </div> 
                  <div id="capa2" style="display: none"> 
                    <iframe src="maps.cgi?id=<?=$maps[idMapa] ?>" frameborder="0"  scrolling="no" name="mapa"  width="755" height="338"></iframe> 
                  </div> 
                </div> 
 
 <div id="ver_on"><a href="#" onclick="mostrar('capa2')">Mostrar</a></div> 
              <div id="ver_off" style="display: none"><a href="#" onclick="ocultar('capa2')">Ocultar</a></div>

pero aun tengo un problemilla .. cuando muestra la capa2 la ubica en la parte superior .. y la capa1 la deja debajo de ella ..

desearia que dependiendo del clic esta reemplace la anterior ..

SPAWN3000 · #11 (**permalink**) 26/02/2009, 10:06

No puede hacerle .style.display='none'; a la capa1...

Por que no la publicas para ver lo que estas haciendo?

- Según lo que explicas arriba, necesitas que un DIV que se oculte(si esta visible) o se muestre(si esta oculto) cuando haces Click en una sola imagen...Es correcto?

Imagino que estas haciendo un sistema para visualización de imágenes...

Esto fue lo que posteaste:
Lo que necesito es hacer que desde una imagen y solo una, al pincha me muestre el div si este esta oculto, y si esta oculto me lo muestre.

Imagino que tienes una lista de imágenes miniatura, haces click en una y te la muestra grande, con un boton de cerrar en una esquina... por que no utilizas ajax, un mismo Div con render y y solo cambias la imagen? De estos sistemas ya existen muchos y gratis.

Superlinux · #12 (**permalink**) 26/02/2009, 10:35

con esto habilito y deshabilito capas ..

pero cuando intento hacer esto .. se me deshabilita la opcion mostrar

<div id="ver_on"><a href="#" onclick="mostrar('capa2'),ocultar('capa1')">Mostra r</a></div>
<div id="ver_off" style="display: none"><a href="#" onclick="ocultar('capa2'),mostrar('capa1'),">Ocult ar</a></div>

asi funciona bien pero me carga una capa .. debajo de otra ..

<div id="ver_on"><a href="#" onclick="mostrar('capa2')">Mostrar</a></div>
<div id="ver_off" style="display: none"><a href="#" onclick="ocultar('capa2')">Ocultar</a></div>

Este es el codigo

Código PHP:

 
<head> 
  
<script> 
OCULTO="none"; 
VISIBLE="block"; 
  
function mostrar(blo) { 
  document.getElementById(blo).style.display=VISIBLE; 
  document.getElementById('ver_off').style.display=VISIBLE; 
  document.getElementById('ver_on').style.display=OCULTO; 
} 
  
function ocultar(blo) { 
  document.getElementById(blo).style.display=OCULTO; 
  document.getElementById('ver_off').style.display=OCULTO; 
  document.getElementById('ver_on').style.display=VISIBLE; 
} 
</script> 
  
</head> 
  
<body> 
<div align="center"> 
                  <div id="capa1" style="display: visible"> 
                    <?php include("articulos_especialistas.php") ?> 
                  </div> 
      <div id="capa2" style="display: none"> 
                    <iframe src="maps.cgi?id=<?=$maps[idMapa] ?>" frameborder="0"  scrolling="no" name="mapa"  width="755" height="338"></iframe> 
                  </div> 
</div> 
  
<div id="ver_on"><a href="#" onclick="mostrar('capa2'),ocultar('capa1')">Mostrar</a></div> 
<div id="ver_off" style="display: none"><a href="#" onclick="ocultar('capa2'),mostrar('capa1'),">Ocultar</a></div> 
</body>

SPAWN3000 · #13 (**permalink**) 26/02/2009, 11:07

Recuerda que tu opción mostrar debe estar por fuera de cualquiera de las capas con la que vas ha interactuar... Y que el ID "capainteracion", no se cambie las propiedades display...

<div>
<div id="capainteracion"><a...onclick="..."/>MOSTRAR/OCULTAR</a></div>
<div id="listadeimagenes">mis imagenes</div>
</div>
<div id="capaocultar/mostrar" style="display:none;position:absolute; z-index:10; overflow:auto;"></div>

Superlinux · #14 (**permalink**) 26/02/2009, 11:12

Definitivamente . cada vez me confundes mas ...

: