Tutorial

La imagen de Sustitución describe un comportamiento interactivo que se activa simplemente al pasar el cursor del mouse encima de la imagen en cuestión, es decir, cuando usted desliza por encima el cursor del mouse sobre la imagen ésta cambiará por otra imagen.

En primer lugar se necesitarán dos imágenes, una que estará en estado OFF o Apagado, la cual actuará cuando el cursor del mouse no esté encima de la imagen, la segunda imagen solo actuará en estado ON o Encendido, esto quiere decir que se hará presente siempre y cuando el cursor del mouse esté encima de la imagen con el comportamiento interactivo.

dreamweaver
dreamweaver
Estado OFF
Estado ON

 

Después de conseguir las dos imágenes necesarias para aplicar este comportamiento interactivo se necesitará ir al menú principal del programa y elegir la opción Insertar, inmediatamente seleccione Objetos de Imagen y en el menú emergente elija Imagen de sustitución, tal como muestra la siguiente imagen.

dreamweaver

 

En este instante usted deberá rellenar el cuadro de diálogo Insertar imagen de sustitución. A continuación se describirá brevemente cada campo.

Nombre de la imagen:
Servirá para tener una referencia de la imagen que presenta un comportamiento interactivo.
Imagen original:
Esta imagen será la que actuará en estado OFF
Imagen de sustitución:
Esta imagen será la que actuará en estado ON
Carga previa de imagen de sustitución :
Es importante marcar esta casilla de verificación, ya que permite que se incluya automáticamente en la carga de la página la(s) imagen(es) de sustitución (las del tipo ON), esto evita posibles demoras debido a la descarga de la imagen (del tipo ON) cuando sea oportuno (al pasar el cursor del mouse encima de la imagen de sustitución).
Texto Alternativo:
Este campo se refiere al efecto que se le inserta a las imágenes que permite mostrar un texto después de permanecer el cursor del mouse por pocos segundos encima de la imagen en cuestión. Este campo es opcional.
Al hacer clic, ir a URL:
Este campo se refiere a la inserción de un hipervínculo a la imagen. Este campo es opcional.

dreamweaver

En la imagen anterior podrá observar que no se relleno el campo Al hacerse clic, ir a URL, simplemente porque no se tiene intención de hacer un hipervínculo aunque en algunos casos si es conveniente rellenar este campo.

Ahora bien, a pesar de no haber rellenado el último campo del cuadro de diálogoInsertar imagen de sustitución, al hacer clic en la imagen desde el programa Macromedia Dreamweaver se podrá observar en el campo Vínculo en el panel Propiedades que aparece el carácter almohadilla (#), esto se debe porque Macromedia Dreamweaver genera el código JavaScript necesario para la creación del comportamiento interactivo Sustitución de Imagen o comúnmente llamado Rollover.

En el caso que usted intente eliminar el carácter almohadilla Macromedia Dreamweaver le hará una advertencia, en donde le indica que al eliminar el Vínculo se eliminarán los comportamientos generados por el código JavaScript, esto quiere decir en pocas palabras que si usted elimina el evento generado por el Vínculo, usted estará eliminando el comportamiento interactivo de Rollover, simplemente aparecerá la imagen en estado ON, no habrá cambio o sustitución alguna.

dreamweaver

En caso que usted posea una imagen fuera de la carpeta raíz de su Sitio Actual, Macromedia Dreamweaver le hará una advertencia, en el caso que usted no le preste atención a esta advertencia es muy seguro que se genere un problema al momento de publicar su sitio en la red, esto se debe a que la imagen deja de ser accesible y se crea un vínculo roto, lo recomendable es que usted copie la imagen a la carpeta raíz de su sitio, preferiblemente en la carpeta que usted almacena todas las imágenes.

dreamweaver

25 diciembre, 2014
dreamweaver

Imágenes de sustitución en DreamWeaver

La imagen de Sustitución describe un comportamiento interactivo que se activa simplemente al pasar el cursor del mouse encima de la imagen en cuestión, es decir, […]
25 diciembre, 2014
dreamweaver

Validar nuestro código en DreamWeaver

Poniendo a tono nuestro programa Simplemente abra Dreamweaver MX 2004 y seleccione en el menú Edición » Preferencias (PC: Ctrl+U, MAC: Cmd+U). Seleccione la opción Accesibilidad […]
25 diciembre, 2014
dreamweaver

CSS Hojas de estilo en DreamWeaver

La idea básica del diseño web actual es separar el contenido y la estructura del estilo y la apariencia. El estilo y la apariencia estarán contenidos […]
25 diciembre, 2014
dreamweaver

Cinco pasos hacia páginas más profesionales con Dreamweaver

Cinco pasos hacia páginas más profesionales con Dreamweaver MX Dicen que un mal artesano siempre le echa la culpa a sus herramientas. Y tienen razón. No […]
25 diciembre, 2014
dreamweaver

Cómo hacer un rollover con Dreamweaver

Cómo hacer un rollover con Dreamweaver Antes de empezar debes tener dos imágenes (pueden ser JPEG o GIF) para este ejercicio. Una será la imagen original […]
25 diciembre, 2014
dreamweaver

Creando tablas con esquinas redondeadas en DreamWeaver

Creando tablas con esquinas redondeadas en Dreamweaver Mediante unas pequeñas imágenes de forma redondeada, conseguiremos este tan usado efecto de tablas con esquinas redondeadas. Este es […]
25 diciembre, 2014
dreamweaver

Cambiar el color de los enlaces con DreamWeaver

Cuando escribimos un enlace, por defecto aparece de color azul y subrayado. Como podemos ver aquí: Para que aparezca de otro color e incluso poder quitarle […]
25 diciembre, 2014
dreamweaver

Manejo de archivos con DreamWeaver

Creación de Nuevas Carpetas En caso de que usted no tenga a la vista el Panel Archivos en la parte derecha de la ventana principal del […]
25 diciembre, 2014
dreamweaver

Uso del Comando Limpiar HTML de Word con DreamWeaver

Si a usted por casualidad alguna vez se le ha ocurrido la “gran” idea de generar una página web a través del editor de textos Microsoft […]
25 diciembre, 2014
dreamweaver

Mapas de Imágenes con DreamWeaver

Cada vez que usted inserta una imagen a su documento podrá observar en la parte inferior izquierda del panel Propiedades algo similar a lo siguiente: Lo […]
25 diciembre, 2014
dreamweaver

Inserción de etiquetas meta con DreamWeaver

Las etiquetas meta suministran información sobre la página web, esta información puede ser sobre el autor del documento, la descripción de la página, palabras claves o […]
25 diciembre, 2014
dreamweaver

Botones Flash con DreamWeaver

Los Botones Flash al igual que las imágenes de sustitución describen un comportamiento interactivo, este comportamiento se activa al pasar el cursor del mouse encima del […]
25 diciembre, 2014
dreamweaver

La ventana de documento en DreamWeaver

En la vista de Diseño, la ventana de documento muestra el documento actual aproximadamente igual a como aparecerá en un navegador Web. La barra de título […]
25 diciembre, 2014
dreamweaver

Cambiar el tamaño de la ventana de documento en DreamWeaver

La barra de estado de la ventana de documento muestra las dimensiones actuales de la ventana (en píxeles). Si hace clic en este tamaño de ventana, […]
25 diciembre, 2014
dreamweaver

Marcos (frames) en Dreamweaver. Paso a paso.

Introducción Qué son los marcos y para qué se utilizan. Cómo insertar un marco sencillo en una página, y cómo trabajar con él es lo que […]
25 diciembre, 2014
dreamweaver

Utilizar la barra del lanzador en DreamWeaver

La barra del lanzador contiene botones que permiten abrir y cerrar diversos inspectores, paneles y ventanas. También puede ver el lanzador, un panel flotante con idénticos […]
25 diciembre, 2014
dreamweaver

Crea textos en Flash directamente desde DeamWeaver

Una forma muy sencilla de crear botones con animación para los vínculos es, con el denominado, texto flash . Le damos a Insertar > Imágenes interactivas […]
25 diciembre, 2014
dreamweaver

Utilizar la barra de herramientas en DreamWeaver

La barra de herramientas de Dreamweaver contiene botones que permiten alternar entre diferentes vistas del documento rápidamente: Código, Diseño y una tercera vista que combina las […]
25 diciembre, 2014
dreamweaver

Crear enlaces con DreamWeaver

A.- CREAR VÍNCULOS (=ENLACES) EN UNA PÁGINA 1.- Seleccionar texto o imagen que servirá de vínculo 2.- Modificar – Crear vínculo 3.- Buscar y seleccionar el […]
25 diciembre, 2014
dreamweaver

Entorno de trabajo de DreamWeaver MX

A.- INICIAR EL PROGRAMA DREAMWEAVER MX.- Para abrir Dreamweaver MX, llevar a cabo una de estas operaciones: 1.- Inicio – Programas – Macromedia – Hacer clic […]
25 diciembre, 2014
dreamweaver

El Panel de Objetos

El panel Objetos contiene botones para la creación e inserción de diversos tipos de objetos, como tablas, capas e imágenes. Para mostrar u ocultar el panel […]
25 diciembre, 2014
dreamweaver

Crear y editar marcos con DreamWeaver

A.- Planificar los marcos B.- Insertar marcos predefinidos a) Situar el punto de inserción en el documento previamente abierto b) A continuación, llevar a cabo una […]