Los Rollovers son una característica tan popular que Dreamweaver incluye un cuadro de diálogo especial sólo para los Rollovers: el cuadro de diálogo Insertar Imagen de Rollover. Las imágenes de desplazamiento, como su nombre indica, están diseñadas para reaccionar cuando alguien pasa el cursor por encima de una imagen. El efecto puede ser tan dramático como la imagen de un perro siendo reemplazado por la imagen de un león, o tan sutil como el color de una palabra cambiando.
Puede crear efectos de imagen de rollover más complejos con la opción Swap Image del panel Behaviors. La opción Intercambiar imagen le permite cambiar varias imágenes al mismo tiempo.
Para crear un efecto de rollover simple con dos imágenes utilizando el cuadro de diálogo Insertar rollover de imagen de Dreamweaver, siga estos pasos:
Los efectos Rollover requieren al menos dos imágenes: una para el estado inicial y otra para el estado de renovación. Puede utilizar dos imágenes diferentes o dos similares, pero ambas deben tener las mismas dimensiones. De lo contrario, se verán efectos de escala extraños, ya que ambas imágenes deben mostrarse exactamente en el mismo espacio de la página.
También puede utilizar la lista desplegable disponible en el icono Imágenes del panel Insertar común y seleccionar Rollover Image.
Antes de que pueda aplicar un comportamiento a un elemento, como una imagen, el elemento debe tener un nombre para que el script de comportamiento pueda hacer referencia a él. Puedes nombrar los elementos como quieras siempre y cuando no uses espacios o caracteres especiales.
En el cuadro Imagen original, especifique la primera imagen que desee que sea visible. Si las imágenes no están ya en la carpeta de su sitio local, Dreamweaver las copia en su sitio cuando usted crea la transferencia.
En la casilla Rollover Image, introduzca la imagen que desea que se haga visible cuando un visitante mueva el cursor sobre la primera imagen y, de nuevo, puede utilizar el botón Browse para localizar y seleccionar la imagen.
Seleccione la casilla de verificación Precargar imagen de transferencia para cargar todas las imágenes de transferencia en la caché del navegador cuando se cargue la primera página Si no elige este paso, sus visitantes pueden experimentar un retraso porque la segunda imagen no se descargará hasta que el cursor pase por encima de la imagen original.
En el campo Texto alternativo, introduzca una descripción de las imágenes. texto alternativo es opcional, pero se recomienda porque el uso de palabras clave puede mejorar la optimización de motores de búsqueda. Del mismo modo, el texto alternativo es una parte clave de la accesibilidad web, ya que este texto es leído en voz alta por los navegadores especiales llamados lectores de pantalla, que son utilizados por las personas ciegas y otras con visión limitada o movilidad limitada. El texto alternativo sólo se muestra en el navegador si las imágenes no son visibles.
Si no especifica una URL, Dreamweaver inserta automáticamente el signo # como marcador de posición en el código, el signo # es una técnica común para crear enlaces que no se enlazan en ninguna parte. Debido a que las imágenes de rollover que no se vinculan a otra página tienen muchos usos, esta técnica es útil. Sólo recuerda que si quieres que tu rollover se vincule, necesitas reemplazar el signo # por un enlace a otra página.
Las imágenes se configuran automáticamente como un rollover.
Para ver el rollover en acción, guarde el archivo y luego haga clic en el icono del globo terráqueo en la parte superior del espacio de trabajo para obtener una vista previa de su página en un navegador web.
Puede ver cómo funciona la transferencia en la vista Diseño de Dreamweaver o utilizando la opción Vista en vivo. Al hacer clic en el botón En Vivo en la parte superior izquierda del espacio de trabajo, básicamente convierte a Dreamweaver en un navegador web que muestra páginas muy parecidas a las del navegador Chrome.
Al obtener una vista previa de una página en el equipo que incluye una imagen de transferencia, algunos exploradores web mostrarán una advertencia que indica que debe permitir que los controles ActiveX vean la página. Este es un aviso de seguridad que aparece sólo cuando la página se abre en el mismo ordenador en el que se guarda la página.
Si publica la página en un servidor web y luego la ve a través de una conexión a Internet, usted y los visitantes de su sitio no verán este error.
