Cómo crear rollovers en Adobe Dreamweaver CS6

Cómo crear rollovers en Adobe Dreamweaver CS6 - dummies

En Adobe Dreamweaver CS6, puede insertar objetos de imagen, incluidos marcadores de posición de imagen, rollover imágenes (imágenes que cambian cuando un espectador rueda el mouse sobre la imagen), barras de navegación y HTML de Fireworks. Puede acceder a estos objetos de imagen seleccionando Insertar → Objetos de imagen.

Para crear una imagen de sustitución, siga estos pasos:

1 Cree las imágenes que se utilizarán como la imagen cambiante.

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 mejores resultados, cree imágenes que tengan exactamente el mismo ancho y alto.

2 Coloque el cursor en la página donde desee que aparezca la imagen cambiante y elija Insertar → Objetos de imagen → Imagen de sustitución o haga clic en el botón Imagen de sustitución en el panel Insertar.

Aparece el cuadro de diálogo Insertar imagen cambiante.

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

Este nombre se usa en el script que crea el rollover.

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

La imagen aparece solo cuando alguien coloca el puntero del mouse sobre la imagen.

5Deje seleccionada la casilla de verificación Imagen de cambio de precarga.

Esta opción descarga la imagen transferida cuando se descarga la página para evitar retrasos en las reinversiones.

6 Escriba texto alternativo apropiadamente descriptivo.

Por supuesto, debe escribirlo en el campo de texto Alt.

7En el campo Al hacer clic, Ir a URL, dígale a Dreamweaver dónde se dirigen a los espectadores cuando hacen clic en su imagen de sustitución.

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

Si está enlazando a un sitio web diferente, debe incluir el prefijo // al comienzo de la URL. Si deja esto en blanco, Dreamweaver agregará un enlace muerto (#) automáticamente.

8Haga clic en Aceptar.

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

9 Para previsualizar la nueva imagen de sustitución, seleccione Archivo → Vista previa en el navegador o haga clic en el botón Vista en vivo en la barra de herramientas del documento.

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