Comportamientos

En este tema vamos a ver las características básicas de los comportamientos, así como un par de ejemplos de entre sus posibles aplicaciones.

15.1. Introducción

Los comportamientos son acciones que suceden cuando los usuarios realizan algún evento sobre un objeto, como puede ser mover el ratón sobre una imagen, pulsar sobre un texto, hacer doble clic sobre un mapa de imagen, etc.

Los comportamientos no existen como código HTML, se programan en JavaScript. Dreamweaver permite insertarlos a través del panel Comportamientos, por lo que no es necesario escribir ninguna línea de código JavaScript para programarlos.

La imagen que aparece a continuación tiene asociado un comportamiento. Sitúa el puntero sobre ella para ver qué es lo que ocurre.

Estás visualizando una capa que estaba oculta.

Si dejas de situar el puntero sobre la imagen, la capa volverá a ocultarse.

La imagen tiene asociados dos comportamientos para mostrar y ocultar la capa. Este tipo de comportamiento lo veremos más adelante.

Otros comportamientos que ya has visto son los que se aplican sobre las imágenes de sustitución y las barras de navegación, que ya están predefinidos, por lo que no es necesario introducir este conjunto de comportamientos a través del panel Comportamientos.

Para validar formularios ya viste algunas características del panel Comportamientos. Vamos a recordar las que necesitamos para poder insertar comportamientos más tarde.

El panel Comportamientos se puede abrir a través del menú Ventana, opción Comportamientos. También pulsando Mayús+F4.

En este panel hay que desplegar el botón pulsando sobre él, y en Mostrar eventos elegir HTML 4.1. Es la opción por defecto. Esta opción se debe a que en el pasado, los comportamientos solían ser diferentes dependiendo del navegador.

En la actualidad, los navegadores tienden a seguir el estándar, lo que hace que ya no tengamos problemas de compatibilidad. Sólo habremos de cambiarlo si hacemos páginas específicas para navegadores más viejos, ya en desuso.

Insertar un comportamiento

Lo primero que hay que hacer es asignar un ID al que afectará el comportamiento. Esto lo podemos hacer desde el inspector de propiedades.

Después seleccionamos el objeto que activa el comportamiento, como puede ser una imagen, un fragmento de texto, etc.

El elemento al que afecta y el que activa el comportamiento puede ser el mismo o no.

Al desplegar el botón del panel Comportamientos aparece la lista de todas las acciones posibles.

Según el elemento sobre el que se desee aplicar el comportamiento, se podrán elegir unas acciones, mientras que otras no.

En este caso la acción Validar formulario no puede seleccionarse porque no existe ningún formulario en la página.

Después de elegir alguna acción, el comportamiento correspondiente aparece en el panel Comportamientos. En este caso se han insertado dos comportamientos.

Como puedes ver, cada comportamiento tiene asociados un evento y una acción.

Las acciones son las que se han elegido en la lista anterior y el evento indica cuándo se debe de realizar la acción.

Para eliminar un comportamiento, hay que seleccionarlo en el panel Comportamientos y pulsar sobre el botón . También es posible cambiar el orden de los comportamientos aplicados a un objeto, seleccionándolos y ordenándolos mediante los botones .

Mostrar-Ocultar elementos

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, ero 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 la e 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).

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.