Búsqueda personalizada

COMPORTAMIENTOS EN DREAMWEAVER CS3 - INTERCAMBIAR IMAGENES [PTE.A]

Funcionalidad avanzada de Dreamweaver en el uso de Capas y sus comportamientos.

Los comportamientos son, valga la redundancia, comportamientos que asignamos a determinados sucesos para que la página reaccione de una manera determinada.
Todo esto lo veremos mejor un ejemplo.
El primer paso es seleccionar el objeto sobre el que deseamos aplicar el comportamiento, por ejemplo una de las imágenes de una capa que esta dentro de una tabla.
A continuación desplegaremos el menú "etiqueta" y pulsaremos sobre la pestaña comportamientos.
Debajo de la leyenda "comportamientos" encontramos un signo "+".
Pulsaremos sobre él para desplegar el menú de comportamientos disponible para el objeto seleccionado. Esto último es importante tenerlo en cuenta, pues los comportamientos cambian según sea el objeto seleccionado. Un texto, o un link, no soporta los mismos comportamientos que, por ejemplo, una imagen.


Como tenemos seleccionada una imagen, vamos a seleccionar de la tabla un comportamiento que sólo podemos aplicar a imágenes.

"Intercambiar imagen". Este comportamiento logra un efecto muy bonito, se trata de que en una página web, cuando el usuario pase el puntero del ratón sobre la imagen, esta imagen cambie y sea sustituida por otra distinta.

Se pueden conseguir páginas muy efectivas con este comportamiento y un poco de imaginación y buen gusto.

Tras pulsar en la opción intercambiar imagen. Dreamweaver nos mostrara un cuadro de diálogo en el que nos pedirá que definamos el origen, esto simplemente quiere preguntarnos ¿por cual imagen quiera que sea sustituida la imagen seleccionada?


Ya conocemos como examinar las carpetas para encontrar la imagen deseada, en este caso haremos lo mismo, vamos a seleccionar la imagen "árbol" y pulsaremos el botón aceptar



Cuando hayamos seleccionado la imagen volveremos a la ventana de diálogo "intercambiar imagen" y pulsaremos aceptar.


Hay un punto que no he comentado, y que es apropiado hacerlo antes de salir de esta ventana.

En la zona inferior de la ventana hay dos opciones marcadas

Una es "carga previa de imágenes" y la otra es "restaurar imágenes onmouseout". Por defecto ambas opciones están marcadas.

Es conveniente conocer la función de ambas opciones, la primera función se encarga de que cuando el usuario visualiza la página por primera vez, su ordenador descargue todas las imágenes relacionadas, incluida la de intercambio ¿con qué objetivo? Pues para que cuando el usuario pase el puntero del ratón sobre la imagen, el intercambio sea instantáneo pues ya ha cargado previamente la imagen.


La segunda función "restaurar imágenes onmouseout" se encarga de restaurar la imagen original cuando el puntero del ratón deje de estar sobre la imagen, esta es una opción que depende más del gusto estético que de características técnicas. Así que este punto es totalmente opcional.

En la imagen superior vemos como queda el panel etiqueta después de añadir nuestros comportamientos.

Cuando visualicemos la página se verá como la imagen superior de manera normal, pero si superponemos el puntero del ratón la página se verá como la imagen inferior


OPCIONES DE LOS COMPORTAMIENTOS
onAbort (NS3, NS4, IE4) se genera cuando el usuario detiene el explorador antes de que se cargue completamente una imagen (por ejemplo, cuando el usuario hace clic en el botón Detener del explorador mientras se está cargando una imagen).

onAfterUpdate (IE4) se genera cuando un elemento de datos vinculados de la página termina de actualizar el origen de los datos.

onBeforeUpdate (IE4) se genera cuando un elemento de datos vinculados de la página ha cambiado y va a perder foco (y, por consiguiente, va a actualizar el origen de los datos).

onBlur (NS3, NS4, IE3, IE4) es lo contrario a onFocus. El evento onBlur se genera cuando el elemento especificado deja de ser el foco de interacción del usuario. Por ejemplo, cuando un usuario hace clic fuera de un campo de texto después de haber hecho clic en él, el explorador genera un evento onBlur para el campo de texto.

onBounce (IE4) se genera cuando el contenido de un elemento de marquesina ha alcanzado el límite de la marquesina.

onChange (NS3, NS4, IE3, IE4) se genera cuando el usuario cambia un valor de la página, como, por ejemplo, cuando el usuario elige un elemento de un menú o cambia el valor de un campo de texto y, seguidamente, hace clic en algún otro lugar de la página.

onClick (NS3, NS4, IE3, IE4) se genera cuando el usuario hace clic en el elemento especificado, como, por ejemplo, un vínculo, un botón o un mapa de imagen. (Hacer clic consiste en pulsar y, seguidamente, soltar el botón del ratón mientras se señala al elemento.)

onDblClick (NS4, IE4) se genera cuando el usuario hace doble clic en el elemento especificado. (Hacer doble clic consiste en pulsar y soltar rápidamente el botón del ratón mientras se señala al elemento.)

onError (NS3, NS4, IE4) se genera cuando se produce un error en el explorador al cargar una página o una imagen.
onFinish (IE4) se genera cuando el contenido de un elemento de marquesina completa un bucle.

onFocus (NS3, NS4, IE3, IE4) se genera cuando el elemento especificado se convierte en el foco de interacción del usuario. Por ejemplo, al hacer clic en un campo de texto de un formulario, se genera un evento onFocus.

onHelp (IE4) se genera cuando el usuario hace clic en el botón de Ayuda o elige Ayuda del menú de un explorador.

onKeyDown (NS4, IE4) se genera en el momento en que el usuario pulsa cualquier tecla. (No es preciso que el usuario suelte la tecla para que se genere este evento.)

onKeyPress (NS4, IE4) se genera cuando el usuario pulsa y suelta cualquier tecla; este evento es una combinación de los eventos onKeyDown y onKeyUp.

onKeyUp (NS4, IE4) se genera cuando el usuario suelta una tecla después de pulsarla.

onLoad (NS3, NS4, IE3, IE4) se genera cuando termina de cargarse una imagen o una página.

onMouseDown (NS4, IE4) se genera cuando el usuario pulsa el botón del ratón. (No es necesario que el usuario suelte el botón del ratón para que se genere este evento.)

onMouseMove (IE3, IE4) se genera cuando el usuario mueve el ratón mientras señala al elemento especificado. (Es decir, el cursor permanece dentro de los límites del elemento.)

onMouseOut (NS3, NS4, IE4) se genera cuando el cursor abandona el elemento especificado. (El elemento especificado es generalmente un vínculo.)

onMouseOver (NS3, NS4, IE3, IE4) se genera cuando el ratón comienza a moverse para señalar al elemento especificado. (Es decir, cuando el cursor se desplaza desde una posición en la que no señala al elemento hasta una posición en la que sí lo señala.) El elemento especificado para este evento es generalmente un vínculo.

onMouseUp (NS4, IE4) se genera cuando se suelta un botón del ratón que se encuentra pulsado.

onMove (NS4) se genera cuando se mueve una ventana o un marco.

onReadyStateChange (IE4) se genera cuando cambia el estado del elemento especificado. Entre los estados posibles del elemento figuran uninitialized (sin inicializar), loading (cargando) y complete (terminado).

onReset (NS3, NS4, IE3, IE4) se genera cuando se restauran los valores predeterminados de un formulario.

onResize (NS4, IE4) se genera cuando el usuario cambia el tamaño de la ventana del explorador o de un marco.

onRowEnter (IE4) se genera cuando ha cambiado el cursor de registro actual del origen de datos vinculados.

onRowExit (IE4) se genera cuando va a cambiar el cursor de registro actual del origen de datos vinculados.

onScroll (IE4) se genera cuando el usuario desplaza la página hacia arriba o hacia abajo.

onSelect (NS3, NS4, IE3, IE4) se genera cuando el usuario selecciona texto en un campo de texto.

onStart (IE4) se genera cuando el contenido de un elemento de marquesina inicia un bucle.

onSubmit (NS3, NS4, IE3, IE4) se genera cuando el usuario envía un formulario.

onUnload (NS3, NS4, IE3, IE4) se genera cuando el usuario abandona la página


Leyenda: NS3, NS4 --> NETSCAPE VS. 3, 4 u otra sup. - IE3, IE4 INTERNET EXPLORER VS. 3, 4 u otra sup.


No hay comentarios:

 
Copyright 2009 Aplicaciones Online. Powered by Blogger Blogger Templates create by Deluxe Templates | Blogger Styles | WP by Masterplan