Cómo crear una imagen Rollover simple en el software Dreamweaver

Cómo crear una imagen Rollover simple en Dreamweaver: los rollos dummies

Las transferencias son una característica tan popular que Dreamweaver incluye un cuadro de diálogo especial solo para las transferencias: el cuadro de diálogo Insertar imagen de sustitución. Las imágenes de sustitución, como su nombre lo indica, están diseñadas para reaccionar cuando alguien rueda el cursor sobre una imagen. El efecto puede ser tan dramático como una imagen de un perro siendo reemplazada por una imagen de un león, o tan sutil como el color de una palabra que cambia.

Puede crear efectos de imagen cambiantes más complejos con la opción Cambiar imagen del panel Comportamientos. La opción Cambiar imagen le permite cambiar varias imágenes al mismo tiempo.

Para crear un efecto de rollover simple con dos imágenes usando el cuadro de diálogo Rollover Insertar imagen de Dreamweaver, siga estos pasos:

  1. Coloque el cursor en la página donde desea que aparezca el rollover.

    Los efectos de sustitución requieren al menos dos imágenes: una para el estado inicial y otra para el estado de sustitución. Puede usar dos imágenes diferentes o dos similares, pero ambas deben tener las mismas dimensiones. De lo contrario, verá extraños efectos de escala porque ambas imágenes se deben mostrar exactamente en el mismo espacio de la página.

  2. Elija Insertar → Imagen → Rollover Image.

    Alternativamente, puede usar la lista desplegable disponible desde el ícono Imágenes en el panel Insertar común y seleccionar Imagen desplegable.

    Aparece el cuadro de diálogo Insertar imagen cambiante.

  3. En el cuadro Nombre de la imagen, nombre su imagen.

    Antes de poder 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. Puede nombrar los elementos que desee siempre que no utilice espacios ni caracteres especiales.

  4. En el cuadro Imagen original, especifique la primera imagen que desea que sea visible. Use el botón Examinar para ubicar y seleccionar la imagen.

    Si las imágenes aún no están en su carpeta de sitio local, Dreamweaver las copia en su sitio cuando crea la renovación.

  5. En el cuadro Rollover Image, ingrese la imagen que desea que se vuelva visible cuando un visitante mueva el cursor sobre la primera imagen.

    Nuevamente, puede usar el botón Examinar para ubicar y seleccionar la imagen.

  6. Seleccione la casilla de verificación Imagen precargada para cargar todas las imágenes transferidas a la memoria caché del navegador cuando la página se cargue por primera vez.

    Si no elige hacer este paso, sus visitantes pueden experimentar un retraso porque la segunda imagen no se descargará hasta que el cursor se desplace sobre la imagen original.

  7. En el campo Texto alternativo, ingrese una descripción de las imágenes.

    El texto alternativo es opcional pero se recomienda porque el uso de palabras clave puede mejorar la optimización del motor de búsqueda.Del mismo modo, el texto alternativo es una parte clave de la accesibilidad web porque este texto es leído en voz alta por navegadores especiales llamados lectores de pantalla, que son utilizados por personas ciegas y otras con vista o movilidad limitadas. El texto alternativo se muestra solo en el navegador si las imágenes no son visibles.

  8. En el cuadro Al hacer clic, Ir a URL, ingrese cualquier dirección web o busque otra página en su sitio al que desea vincular.

    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 enlazan en ningún lugar. Debido a que las imágenes dinámicas que no se vinculan a otras páginas tienen muchos usos, esta técnica es útil. Solo recuerde que si desea vincular su rollover, debe reemplazar el signo # con un enlace a otra página.

  9. Haga clic en Aceptar.

    Las imágenes se configuran automáticamente como rollover.

  10. Para ver la renovación en acción, guarde el archivo y luego haga clic en el icono de globo en la parte superior del área de trabajo para obtener una vista previa de su página en un navegador web.

Puede ver cómo funciona su rollover en la vista Diseño de Dreamweaver o mediante la opción Vista en vivo. Cuando hace clic en el botón En vivo en la esquina superior izquierda del espacio de trabajo, básicamente convierte Dreamweaver en un navegador web que muestra páginas muy parecidas al navegador Chrome.

Cuando está visualizando una página en su computadora que incluye una imagen renovada, algunos navegadores web mostrarán una advertencia que indica que debe permitir que los controles ActiveX vean la página. Esta es una advertencia de seguridad que aparece solo cuando la página se abre en la misma computadora donde 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.

Crédito: Obra de istockphoto. com