Tutorial para crear una imagen de rollover en Dreamweaver

Una imagen de rollover es una imagen que cambia a otra imagen cuando usted o su cliente mueven el mouse sobre ella. Estos se utilizan comúnmente para crear una sensación interactiva, como botones o pestañas. Pero puedes crear imágenes de rollover a partir de casi cualquier cosa.

Este tutorial está diseñado para ayudarlo a crear una imagen de rollover en Dreamweaver. Está diseñado para ser utilizado por personas que utilizan las siguientes versiones de Dreamweaver:

• Dreamweaver MX
• Dreamweaver MX 2004
• Dreamweaver 8
• Dreamweaver CS3
• Dreamweaver CS4
• Dreamweaver CS5
• Dreamweaver CS6

Requisitos para este tutorial

• DreamweaverUna de las versiones mencionadas anteriormente.
• Una imagen originalAsegúrate de optimizar esta imagen. Esto ayudará a que sus páginas se carguen más rápidamente.
• La imagen de rolloverEsta imagen debe tener las mismas dimensiones que la imagen original. Y, al igual que la imagen original, debe optimizarse para ayudar a los tiempos de carga de la página.
• Una página webEsta es la página HTML donde colocarás tu imagen de rollover.

Empezar

1. Iniciar Dreamweaver
2. Abre la página web donde quieras tu rollover.

Insertar un objeto de imagen de vuelco

Dreamweaver facilita la creación de una imagen de rollover.

1. Vaya al menú Insertar y baje a la Objetos de imagen submenú
2. Seleccionar Rollover de imagen o Imagen de vuelco.

Algunas versiones anteriores de Dreamweaver llaman a las Objetos de Imagen "Imágenes Interactivas" en su lugar.

Dile a Dreamweaver qué imágenes usar

Dreamweaver muestra un cuadro de diálogo con los campos que debe completar para crear su imagen de rollover.

Nombre de la imágen

Elija un nombre de imagen que sea único para la página. Debe ser una sola palabra, pero puede usar números, guiones bajos (_) y guiones (-). Esto se utilizará para identificar la imagen a cambiar.

Imagen original

Esta es la URL o la ubicación de la imagen que comenzará en la página. Puede utilizar las URL de ruta relativa o absoluta en este campo. Esta debe ser una imagen que exista en tu servidor web o que subirás con la página.

Imagen de vuelco

Esta es la imagen que aparecerá cuando pases el mouse sobre la imagen. Al igual que la imagen original, esta puede ser una ruta absoluta o relativa a la imagen, y debe existir o cargarse al cargar la página.

Imagen de vuelco de precarga

Esta opción está seleccionada de forma predeterminada porque ayuda a que el rollover aparezca más rápidamente. Al elegir precargar la imagen de rollover, el navegador web la almacenará en un caché hasta que el mouse se mueva sobre ella.

Texto alternativo

Un buen texto alternativo hace que tus imágenes sean más accesibles. Siempre debe utilizar algún tipo de texto alternativo al agregar cualquier imagen.

Cuando se hace clic, ir a la URL

La mayoría de las personas hacen clic en una imagen cuando ven una en una página. Así que deberías tener la costumbre de hacerlos cliquear. Esta opción le permite especificar la página o la URL para llevar al espectador cuando hacen clic en la imagen. Pero esta opción no es necesaria para crear un rollover.

Cuando hayas completado todos los campos, haz clic en DE ACUERDO para que Dreamweaver cree su imagen de rollover.

Dreamweaver escribe el JavaScript para ti

Si abre la página en la vista de código, verá que Dreamweaver inserta un bloque de JavaScript en el de su documento HTML. Este bloque incluye las 3 funciones que necesita para que las imágenes se intercambien cuando el mouse pasa sobre ellas y la función de precarga si optó por eso.

función MM_swapImgRestore ()función MM_findObj (n, d)función MM_swapImage ()función MM_preloadImages ()

Dreamweaver agrega el HTML para el Rollover

Si elige que Dreamweaver cargue previamente las imágenes de rollover, verá el código HTML en el cuerpo del documento para llamar a la secuencia de comandos de precarga para que sus imágenes se carguen más rápidamente.

onload = "MM_preloadImages ('shasta2.jpg')"

Dreamweaver también agrega todo el código para su imagen y lo vincula (si incluyó una URL). La parte de rollover se agrega a la etiqueta de anclaje como atributos onmouseover y onmouseout.

onmouseout = "MM_swapImgRestore ()"onmouseover = "MM_swapImage ('Image1', '', 'shasta1.jpg', 1)"

Probar el rollover

Vea la imagen de rollover completamente funcional y aprenda lo que Shasta piensa.