Unidad 15. Comportamientos (III)


15.3. Mostrar-Ocultar elementos

Ver el videotutorial

Uno de los comportamientos más habitual e interesante es el de Mostrar-Ocultar elementos. Lo más común es emplearlo con capas, que han de haber sido creadas antes, pero podemos hacerlo con cualquier elemento que tenga un ID asignado. Lo que hace este comportamiento es alternar entre las propiedades de visibilidad visible y hidden.

Al principio del tema teníamos un ejemplo de este tipo. Vamos a ver qué eventos y acciones hay que establecer para que se produzca dicho comportamiento.

Después de seleccionar el elemento que producirá el evento (en ése ejemplo, la imagen del gatito) hay que seleccionar una acción de la lista, pulsando sobre el botón . En este caso la acción tiene que ser la de Mostrar-Ocultar elementos.

Tras elegir la acción, se mostrará un cuadro de diálogo en el que aparecen listados todos los elementos de la página que podemos ocultar o mostrar:

Hay que especificar qué elementos han de mostrarse u ocultarse para el evento. Para ello hay que pulsar dos veces sobre la acción, en el panel Comportamientos.

Entonces aparece una nueva ventana, con la lista de todas las capas que hay en la página, en la que puede indicarse la variación que se va a producir sobre la visibilidad

Puede indicarse si se van a Mostrar, si se van a Ocultar, o si van a adquirir la visibilidad inicial (Predeterminada).

Para determinar la visibilidad de cada una de las capas es necesario seleccionarlas una por una, indicando su visibilidad a través de los botones inferiores de la ventana.

 

No es necesario aplicar una visibilidad diferente a todas las capas de la página, solamente a las que se desea que cambien al producirse el evento. Por ejemplo, en este caso a la capa gatomes no se le ha aplicado ninguna visibilidad diferente, ya que no se desea que varíe al producirse el evento.

Si se desea eliminar una visibilidad establecida para alguna de las capas, simplemente hay que volver a pulsar sobre el botón correspondiente a la visibilidad que ya tiene aplicada. Por ejemplo, para eliminar la visibilidad aplicada a la capa gatosemana habría que volver a pulsar sobre el botón Mostrar.

Hay que tener en cuenta en este caso que lo que se desea es que al situar el puntero sobre la imagen, se muestre la capa, y que cuando el puntero deje de estar sobre la imagen, la capa se vuelva a ocultar. Para ello es necesario insertar dos comportamientos con la acción Mostrar-Ocultar elementos. Uno de ellos mostrará la capa para el evento onMouseOver (cuando el ratón esté sobre), mientras que el otro la ocultará para el evento onMouseOut (cuando el ratón esté fuera).


Marzo-2015
Pág. 15.3
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.