WebTaller - Imágenes de sustitución en 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, 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.

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.

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.

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.

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.

Usuarios que han visto este tema también han visto...

- Crear y editar tablas con dreamweaver
- Comportamientos en DreamWeaver
- Introducción al entorno de trabajo de dreamweaver mx
- Conexión FTP desde DreamWeaver
- Escrito sobre la edición de enlaces en dreamweaver.

- Versión imprimible de este documento

- Enviar por e-mail este documento