Si le pedimos al navegador que nos diga si un determinado elemento está oculto o visible, obtenemos diferentes respuestas dependiendo del que estemos usando para visualizar la página (por ejemplo, el Explorer devolverá visible, mientras que el Netscape show). Con lo cual, el hecho de que aún no exista un estándar, nos va a obligar a escribir código para los dos navegadores.

En caso del Netscape Para mostrar un elemento:

	document.nombreDiv.visibility = "show"

y para ocultarlo:

	document.nombreDiv.visibility = "hide"

En caso del Explorer

Para mostrar un elemento:

	nombreDiv.style.visibility = "visible"

y para ocultarlo:

	nombreDiv.style.visibility = "hidden"

Lo que veremos a continuación, serán funciones para mostrar y ocultar elementos. Puesto que se hace siempre igual, es aconsejable hacer funciones que implementen estas tareas.

Bien, ya hemos visto también en el capítulo anterior, que tenemos la posibilidad de crear identificadores que apunten directamente al objeto en sí. Pues dependiendo de si utilizamos esta técnica o no, implementaremos las funciones de mostrar y ocultar objetos de una forma o de otra.

Funciones sin Identificadores DirectosLa implementación queda como sigue:

	function Mostrar (id) 
	{	
	    if (ns4)
		document.layers[id].visibility = "show"
	    else 
		if (ie4)
		    document.all[id].style.visibility = "visible"

	}

	function Ocultar (id) 
	{
	    if (ns4)
		document.layers[id].visibility = "hide"
	    else
		if (ie4)
		    document.all[id].style.visibility = "hidden"
	}

Como podemos ver, dentro de las funciones, distinguimos a quién le asignamos el atributo correspondiente. Quiero decir que no es simplemente la propiedad visibility de la variable que recibimos por parámetros, como ocurrirá en el siguiente caso.

Las llamadas a estas funciones son:

	Mostrar ("IDDiv")

y

	Ocultar ("IDDiv")

Donde IDDiv es el identificador de la capa que queramos modificar.

Ejemplo

Funciones con Identificadores Directos

Ahora veremos las funciones para el caso de usar estos nuevos identificadores:

	function Mostrar (objeto) 
	{
	  if (ns4) 
 	      objeto.visibility = "show"
	  else 
	      if (ie4) 
	 	 objeto.visibility = "visible"
	}

	function Ocultar (objeto) 
	{
	  if (ns4) 
	      objeto.visibility = "hide"
	  else 
              if (ie4)
 	 	 objeto.visibility = "hidden"
	}

Como ya hemos visto, la ventaja de utilizar este método, es que las propiedades CSS son directamente un campo del identificador que recibimos por parámetros, independientemente del navegador que estemos usando.

En este caso, las llamadas que se deben hacer son las siguientes:

	Mostrar (IDDiv)

y

	Ocultar (IDDiv)	

Ejemplo

Niveles de Profundidad

Este aspecto es muy fácil de utilizar, y con él podemos conseguir efectos muy logrados. Como se puede suponer, con esta propiedad (z-index) controlamos cuan lejos en el espacio está la capa que estamos tratando. De esta manera, podemos colocar unas capas delante de otras, de manera que oculte total o parcialmente las demás.

Los valores que se le dan funcionan de la siguiente manera: cuanto mayor es el número, más cerca se encuentra desde nuestro punto de vista. Por ejemplo, si una capa tiene una profundidad de 3 y otra de 4, veremos totalmente esta segunda capa, y de la primera veremos lo que no cubra la segunda.

Ejemplo

- Versión imprimible de este documento
- Enviar por e-mail este documento