Unidad 13. Comportamientos (II)

Mostrar-Ocultar capas

Uno de los comportamientos más habitual e interesante es el de Mostrar-Ocultar capas. Resulta obvio que para poder aplicar este comportamiento han de existir capas en el documento.

En la página anterior tenías 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 la imagen 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 capas.

Tras elegir la acción, hay que especificar qué capas 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 de cada una de las capas.

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 capas. 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).

Llamar JavaScript

Otro de los comportamientos que puede aplicarse sobre algún objeto es el de Llamar Javascript. Este comportamiento permite insertar código JavaScript dentro del código del documento.

Por ejemplo, es posible hacer que se cierre la ventana del navegador al pulsar sobre un objeto. Para ello hay que insertar la línea JavaScript "window.close();".

Al igual que para el ejemplo de las capas, lo primero que hay que hacer es seleccionar el objeto sobre el que se desea aplicar el comportamiento. Seguidamente hay que seleccionar la acción Llamar Javascript a través del botón .

Entonces aparece una nueva ventana en la que hay que introducir la línea JavaScript.

Una vez insertado el comportamiento, en el panel Comportamientos hay que establecer el evento onclick (al hacer clic) para que la llamada a JavaScript se produzca al pulsar una vez sobre el objeto.

Pulsando dos veces sobre la acción vuelve a abrirse la ventana anterior, y es posible modificar la línea de código.

Para practicar puedes realizar el Ejercicio paso a paso Crear comportamiento.

  Ejercicios del Tema 13.

  Prueba evaluativa del Tema 13.

Pág. 13.2