Cómo crear Rollovers en Adobe Dreamweaver CS6

En Adobe Dreamweaver CS6, puede insertar objetos de imagen, incluidos los marcadores de posición de imagen, las imágenes de renovación (imágenes que cambian cuando un espectador pasa el ratón por encima de la imagen), las barras de navegación y Fireworks HTML. Puede acceder a estos objetos de imagen seleccionando Insert→Image Objetos.

1Cree las imágenes que se van a utilizar como rollover.

Puede generar estas imágenes en Fireworks, Illustrator, Photoshop, o cualquier otra aplicación capaz de guardar imágenes optimizadas para la web. Para obtener los mejores resultados, cree imágenes que tengan exactamente el mismo ancho y alto.

2Coloque el cursor en la página donde quiera que aparezca el rollover y elija Insert→Image Objects→Rollover Imagen o haga clic en el botón Rollover Image en el panel Insertar.

Aparece la ventana de diálogo Insertar imagen de prórroga.

3Escriba un nombre de imagen sin espacios en el campo de texto Nombre de imagen.

Este nombre se utiliza en el script que crea la transferencia.

4Haga clic en los botones Examinar situados a la derecha de los campos de texto Imagen original e Imagen de transferencia para localizar la imagen que desea que aparezca como predeterminada en la página.

La imagen sólo aparece cuando alguien pasa el puntero del ratón por encima de la imagen.

5Deje la casilla de verificación Preload Rollover Image seleccionada.

Esta opción descarga la imagen de transferencia cuando se descarga la página para evitar retrasos en las transferencias.

6Escriba el texto alternativo descriptivo apropiado.

Por supuesto, usted lo escribiría en el campo de texto Alt.

7En el campo de texto Cuando se hace clic, Ir a URL, indique a Dreamweaver dónde se dirige a los espectadores cuando hacen clic en su imagen al pasar el ratón.

Puede hacer clic en el botón Examinar para buscar otra página en su sitio o introducir una URL.

Si tiene un enlace a otro sitio web, debe incluir el prefijo http:// al principio de la URL. Si deja este espacio en blanco, Dreamweaver añadirá un enlace muerto (#) automáticamente.

8Haga clic en Aceptar.

La imagen de renovación se crea en la página.

9Para obtener una vista previa de la nueva imagen de renovación, seleccione File→Preview en el Navegador o haga clic en el botón Vista en vivo de la barra de herramientas Documento.

Si aún no tiene un enlace real para usar en un botón o hipervínculo, puede introducir un signo de numeral (#) para crear un enlace muerto. El enlace o botón aparece pulsable pero no va a ninguna parte cuando se hace clic en él. Esta opción es mejor que presionar la barra espaciadora para crear un espacio vacío como enlace, porque ese enlace mostrará un error de Página no encontrada al hacer clic.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *