Una de las herramientas más comunes y efectivas para crear sitios Web interactivos es JavaScript, que se utiliza principalmente para la codificación para los clientes, es decir los códigos se incluyen en las páginas Web y éstos se procesan por el navegador. Otros códigos se procesan en el servidor y se entrega al usuario.
Dreamweaver simplifica el proceso de utilización de funciones JavaScript estándar proporcionado comportamientos (rutinas de código JavaScript ya escrito que puede incorporar con facilidad en el sitio Web). Un comportamiento combina un evento del usuario (como por ejemplo, mover el cursor sobre un botón de gráfico en el navegador) con una acción o serie de acciones que se producen como resultado del evente.
Inserción de una imagen de sustitución
Uno de los usos más comunes de JavaScript en las páginas Web es crear una imagen de sustitución, que cambia cuando el usuario desplaza el cursos sobre ella. Las imágenes de sustitución combinan la utilización de dos imágenes con el mismo espacio. En Dreamweaver, es posible crear imágenes de sustitución sin tener que mirar siquiera el código HTML o JavaScript.
Para ello debemos hacer clic en el botón "Imagen de sustitución" de menú Común del panel de objetos. Se abrirá el cuadro de diálogo "Insertar imagen de sustitución".
En el campo"Nombre de la imagen" debemos colocar un nombre específico y significativo que indique claramente su propósito. No utilizaremos espacios ni ningún carácter especial y no comenzará el nombre con un número cualquiera de estas acciones puede causar problemas con la codificación y es posible que las imágenes de sustitución no funciones adecuadamente.
En el campo "Imagen original" colocaremos la e de la imagen que aparecerá en la página antes de que el usuario coloque el cursor sobre ella.
En el campo "Imagen de sustitución" colocaremos la ruta de la imagen que sustituirá a la imagen original cuando el usuario coloque el cursor sobre ella en la ventana del navegador.
La opción "Carga previa de imagen de sustitución" está activada por defecto y es recomendable dejarla así. Carga la imagen con el resto de la página hace que las imágenes de sustitución aparezcan con mayor rapidez, eliminando así la espera que se produce cuando el usuario sitúa el cursor sobre la imagen.
En el campo "Texto alternativo" escribiremos el texto qeu aparecerá cuando mantengamos el ratón encima de la imagen (sin pulsarlo).
En la URL debemos escribir a donde iremos al hacer clic en la imagen. Si dejamos el cuadro en blanco, Dreamweaver lo sustituirá por #, también conocido como vículo nulo. Más adelante podremos sustituirlo.
Ejercicio: Cree una página nueva e inserte una imagen de sustitución con las siguientes propiedades:
- Nombre de la imagen:Local
- Imagen original: local_off.gif
- Imagen de sustitución: local_on.gif
- Carga previa de imagen de sustitución:activada
- Texto alternativo: Locations
Al hacerse clic, ir a URL. Una página de nuestro sitio(por ejemplo, index.html del tema3)
Incorporación de comportamientos
Un comportamiento combina en evento del usuario (como por ejemplo, moverel cursor sobre un botón de gráfico en el navegador) con una acción o serie de acciones que se producen como resultado del evento.
En este ejemplo veremos como crear una imagen de sustituccón a partir de gráficos que ya han sido ubicados en la página. El resultado es el mismo que en el ejercicio anterior: una imagen que pasa a mostrar una imagen diferente cuando el usuario se desplaza sobre ella.
Ejemplo: Abrimos el documento Architecture.html. El archivo contiene una serie de tabla y gráficos que ya han sido ubicados mediante las técnicas que ha aprendido en las lecciones anteriores.
Utilizamos el inspector de propiedades para dar nombre a las tres imágenes situadas en la parte inferior de la página de la siguiente manera: styles_off.gif debe llamarse "style",markings_off.gif debe llamarse "marking" y construction_off.gif debe llamarse "construction".
Es recomendable dar nombre a las imágenes de manera que indiquen su contenido o su estado. De este modo identificará claramente las imágenes asociadas a los nombres.
Abrimos el inspector de etiquetas teniendo seleccionada la imagen styles. Hacemos clic en la pestaņa Comportamientos del inspector de etiquetas.
Hacemos clic sobre el botón con el signo más (+)del panel Comportamiento y, en el menú emergente Acciones, elegimos Intercambiar imagen.
En la lista Imágenes, nos aseguramos de que está seleccionada la imagen styles. Se trata del nombre que definió para la imagen.
Hacemos clic en el botón Examinar y buscamos la imagen styles_on_gif, que se encuentra en la carpeta Imagenes.
Nos aseguramos de que las casillas de selección Carga previa de imágenes y Restaurar imágenes onMouseOut están activadas.
La opción previa de imágenes está activada por defecto y es muy recomendable. Esta configuración elimina la demora que produce la descarga que tiene cuando el usuario se desplaza por la imagen. La opción Restaurar imágenes intercambiadas vuelven a las imágenes originales cuando el usuario se desplaza fuera de ellas.
Ambas partes del comportamiento aparecen listadas en el panel Comportamientos: el evento onMouserOver causa la acción de estas acciones y eventos produce el efecto de la imagen de sustitución.
Ejercicio: Repite el proceso para los botones para los botones Markings y Construcción, utilizando marking_on.gif y construction_on.gif para las imágenes de sustitución:
ArribaIntercambio de imágenes mútiples con un solo evento
Podemos hacer que varias imágenes cambien de sus estados originales a sus estados de sustitución al mismo tiempo, como resultado del mismo evento.
En este ejemplo aņadiremos un comportamiento al gráfico Styles, que hará que una imagen distinta cambie al pasar el cursor por encima del Styles.
Ejemplo: En el documento architecture.html modificando anteriormente seleccionamos el botón Styles y hacemos doble clic sobre la acción Intercambiar imagen del panel Comportamientos.
En el recuadro de diálogo Intercambiar imagen, seleccionamos la imagen StyleText. Hacemos clic sobre el botón Examinar y seleccionamos la imagen styles_text_on.gif.
La imagen StylesText es la imagen en blanco situada debajo del gráfico Styles, que ya ha recibido un nombre.
Ejercicio:
Observe la lista de imágenes del cuadro de diálogo Intercambiar imagen. Las imágenes que presentan un asterisco al final del nombre ya tienen una imagen de sustitución asignada. La imagen Styles, por ejemplo, tiene un asterisco a su lado porque ya definimos una imagen de sustitución para ella en el ejemplo anterior. Ahora, la imagen StylesText también tendrá un asterisco a su lado, porque acaba de asignarle una imagen de sustitución.
Ejercicio: Repite el proceso del ejemplo anterior para los botones Marking y Construction. La imágenes en blanco ya tienen nombres: MarkingsTextOff y ConstructionTextOff. Las imágenes de intercambio poseen el sufijo_on.
Previsualice la página.
Incorporación de comportamientos a mapas de imagen
En ocasiones, la sustitución de imagen solo debe tener lugar cuando el usuario se desplaza por una parte determinada de la imagen. Para ello, podemos utilizar mapas de imagen par definir las zonas interactivas.
Crear una imagen de mapa imagen con photoshop, y dar tres enlaces a las páginas: Indesx, Tablas y Vinculos
Ejemplo: En el documento architecture.html modificado anteriormente, utilice el inspector de propiedades para dar nombre a todas las imágenes que están ubicadas en la fila de color negro cercana a la parte superior de la página: nav_hitory.gif debe llamarse "history", nav_technology.gif debe llamarse "technology", nav_lights.gif debe llamarse "lights", nav_resources.gif debe llamarse "resources" y nav_culture.gif debe llamarse "culture".
Seleccione la imagen history y utilice la herramienta Zona interactiva rectangular del inspector de propiedades para dibujar un mapa de imagen que se adapte perfectamente alrededor de la palabra "history".
Volvemos al panel Comportamientos y hacemos clic sobre el botón de la flecha hacia arriba para desplazar el comportamiento Mensaje emergente a la parte superior de la lista.
En el menú que aparece a la derecha del evento actual, elegimos el evento onMouseOut.
Previsualizamos la página y observamos que el mensaje emergente se ejecuta cuando llevamos el cursor fuera de la imagen.
Creación de un mensaje de barra de estado
Un mensaje de barra de estado puede ofrecer a los usuarios información extra sobre el lugar hacia el que conducen los vínculos. Este mensaje, que aparece en la barra de estado situada en la parte inferior de la ventana del navegador, sustituye a la presentación por defecto del URL o ruta hacia la página vinculada.
Ejemplo: En el archivo architecture.html, seleccionamos la imagen Styles.
Hacemos clic en el botón con el signo más (+) del panel Comportamientos y, en el menú emergente Acciones, seleccionamos Definir texto > Establecer texto de la barra de estado.
Se abre el cuadro de diálogo Establecer texto de la barra de estado. Escribimos "Architectural style used in lighthouses" y hacemos clic en Aceptar.
Aparece la acción "Establecer texto de la barra de estado" en el panel Comportamientos. Guradamos el archivo y previsualizamos. Cuando desplazamos el cursor sobre el botón Styles podremos ver el mensaje que acabamos de crear en la barra de estado.
