Curso gratis de Dreamweaver CS5. aulaClic.

15 - Comportamientos

Unidad 15. Comportamientos (I)

En este tema vamos a ver las caractersticas bsicas de los comportamientos, as como un par
de ejemplos de entre sus posibles aplicaciones.

15.1. Introduccin
Los comportamientos son acciones que suceden cuando los usuarios realizan algn evento
sobre un objeto, como puede ser mover el ratn sobre una imagen, pulsar sobre un texto, hacer
doble clic sobre un mapa de imagen, etc.
Los comportamientos no existen como cdigo HTML, se programan en JavaScript. Dreamweaver
permite insertarlos a travs del panel Comportamientos, por lo que no es necesario escribir
ninguna lnea de cdigo JavaScript para programarlos.
La imagen que aparece a continuacin tiene asociado un comportamiento. Sita el puntero sobre
ella para ver qu es lo que ocurre.

La imagen tiene asociados dos comportamientos para mostrar y ocultar la capa. Este tipo de
comportamiento lo veremos ms adelante.
Otros comportamientos que ya has visto son los que se aplican sobre las imgenes de sustitucin
y las barras de navegacin, que ya estn predefinidos, por lo que no es necesario introducir este
conjunto de comportamientos a travs del panel Comportamientos.
Para validar formularios ya viste algunas caractersticas del panel Comportamientos. Vamos a

recordar las que necesitamos para poder insertar comportamientos ms tarde.

El panel Comportamientos se puede abrir
Comportamientos. Tambin pulsando Mays+F4.

travs

http://www.aulaclic.es/dreamweaver-cs5/t_15_1.htm[07/10/2015 09:59:58 p.m.]

del

men

Ventana,

opcin

Curso gratis de Dreamweaver CS5. aulaClic. 15 - Comportamientos

En este panel hay que desplegar el botn

pulsando sobre l, y en Mostrar eventos elegir
HTML 4.1. Es la opcin por defecto. Esta opcin se debe a que en el pasado, los comportamientos
solan ser diferentes dependiendo del navegador.
En la actualidad, los navegadores tienden a seguir el estndar, lo que hace que ya no tengamos
problemas de compatibilidad. Slo habremos de cambiarlo si hacemos pginas especficas para
navegadores ms viejos, ya en desuso.

Pg. 15.1

Tweet

aulaClic S.L. Todos los derechos reservados.

Prohibida la reproduccin por cualquier medio.

Noviembre-2010

http://www.aulaclic.es/dreamweaver-cs5/t_15_1.htm[07/10/2015 09:59:58 p.m.]

Curso gratis de Dreamweaver CS5. aulaClic. 15 - Comportamientos

Unidad 15. Comportamientos (II)

15.2. 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.
Despus 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 botn

del panel

Comportamientos aparece la lista de

todas las acciones posibles.
Segn el elemento sobre el que se

desee aplicar el comportamiento, se

podrn elegir unas acciones, mientras
que otras no.
En este caso la accin Validar

formulario no puede seleccionarse

porque no existe ningn formulario en
la pgina.

Despus de elegir alguna accin, 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 accin.
Las acciones son las que se han elegido en la lista anterior y el evento indica cundo se debe de
realizar la accin.

http://www.aulaclic.es/dreamweaver-cs5/t_15_2.htm[07/10/2015 10:00:46 p.m.]

Curso gratis de Dreamweaver CS5. aulaClic. 15 - Comportamientos

Para eliminar un comportamiento, hay que seleccionarlo en el panel Comportamientos y pulsar

. Tambin es posible cambiar el orden de los comportamientos aplicados a un
sobre el botn
.
objeto, seleccionndolos y ordenndolos mediante los botones
Pg. 15.2

Tweet

aulaClic S.L. Todos los derechos reservados.

Prohibida la reproduccin por cualquier medio.

Noviembre-2010

http://www.aulaclic.es/dreamweaver-cs5/t_15_2.htm[07/10/2015 10:00:46 p.m.]

Curso gratis de Dreamweaver CS5. aulaClic. 15 - Comportamientos

Unidad 15. Comportamientos (III)

15.3. Mostrar-Ocultar elementos

Uno de los comportamientos ms habitual e interesante es el de Mostrar-Ocultar elementos. Lo

ms comn 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 tenamos un ejemplo de este
tipo. Vamos a ver qu eventos y acciones hay que
establecer para que se produzca dicho
comportamiento.
Despus de seleccionar el elemento que
producir el evento (en se ejemplo, la imagen del
gatito) hay que seleccionar una accin de la lista,
. En este caso la accin

pulsando sobre el botn

tiene que ser la de Mostrar-Ocultar elementos.
Tras elegir la accin, se mostrar un cuadro de dilogo en el que aparecen listados todos los
elementos de la pgina 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 accin, en el panel Comportamientos.
Entonces aparece una nueva ventana, con la lista de todas las capas que hay en la pgina, en la
que puede indicarse la variacin 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 travs de los botones inferiores de la ventana.

http://www.aulaclic.es/dreamweaver-cs5/t_15_3.htm[07/10/2015 10:01:24 p.m.]

Curso gratis de Dreamweaver CS5. aulaClic. 15 - Comportamientos

No es necesario aplicar una visibilidad diferente a todas las capas de la pgina, 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 vare al producirse el evento.
Si se desea eliminar una visibilidad establecida para alguna de las capas, simplemente hay que
volver a pulsar sobre el botn correspondiente a la visibilidad que ya tiene aplicada. Por ejemplo,
para eliminar la visibilidad aplicada a la capa gatosemana habra que volver a pulsar sobre el botn
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 accin MostrarOcultar elementos. Uno de ellos mostrar la capa para el evento onMouseOver (cuando el ratn
est sobre), mientras que el otro la ocultar para el evento onMouseOut (cuando el ratn est

fuera).
Pg. 15.3

Tweet

aulaClic S.L. Todos los derechos reservados.

Prohibida la reproduccin por cualquier medio.

Noviembre-2010

http://www.aulaclic.es/dreamweaver-cs5/t_15_3.htm[07/10/2015 10:01:24 p.m.]