Creación de una imagen de sustitución en Dreamweaver CS3

En Dreamweaver, imágenes Rollover - como su nombre indica - están diseñados para reaccionar cuando alguien saca un cursor sobre una imagen. El efecto puede ser tan dramática como una imagen de un perro siendo reemplazada por una imagen de un león, o tan sutil como el color de una palabra cambia como una imagen sustituye a otra. De cualquier manera, Dreamweaver incluye un cuadro de diálogo especial para vuelcos que hace que la creación de un simple efecto de rollover uno de los comportamientos más fáciles de aplicar.

Para crear una imagen de sustitución mediante el cuadro de diálogo Rollover Insertar imagen de Dreamweaver, siga estos pasos:

1. Haga clic para colocar el cursor en la página donde desea que el vuelco que aparezca.

Efectos de rollover requieren al menos dos imágenes: una para el estado inicial y otro para el estado de rollover. Se pueden utilizar dos imágenes diferentes o dos similares, pero ambos deben tener las mismas dimensiones. De lo contrario, usted consigue algunos efectos de escala extraños porque ambas imágenes deben mostrarse en exactamente el mismo espacio en la página.

2. Elija Insertar -> Objetos de imagen -> Imagen de sustitución.

Aparecerá el cuadro de diálogo Insertar imagen de sustitución.

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

Antes de poder aplicar un comportamiento a un elemento, como una imagen, el elemento debe tener un nombre para que el guión comportamiento puede hacer referencia a ella. Usted puede nombrar elementos de todo lo que quieras, siempre y cuando no se utilicen espacios o caracteres especiales.

4. En el cuadro de imagen original, especifique la primera imagen que desea visible. Utilice el botón Examinar para buscar y seleccionar la imagen.

Si las imágenes no están ya en la carpeta raíz de su sitio, Dreamweaver copiará ellos en su sitio cuando se crea el vuelco del vehículo.

5. En el cuadro Imagen de sustitución, ingrese la imagen que quiere llegar a ser visible cuando los visitantes se mueven sus cursores encima de la primera imagen.

Una vez más, puede utilizar el botón Examinar para buscar y seleccionar la imagen.

6. Seleccione la casilla de verificación Carga previa de imagen Rollover para cargar todas las imágenes de sustitución en la caché del navegador cuando la página se carga por primera.

Si no elige hacer este paso, los visitantes pueden experimentar un retraso debido a que la segunda imagen no se descargará hasta que un ratón se rodó sobre la imagen original.

7. En el Al hacer clic encima, Ir a la caja URL, introduzca cualquier dirección web o en Examinar para buscar otra página en su sitio que desea establecer el vínculo.

Si no se especifica una URL, Dreamweaver inserta automáticamente el signo # como marcador de posición.

8. Haga clic en Aceptar.

Las imágenes se configuran automáticamente como un vuelco.

9. Haga clic en el icono del globo en la parte superior del espacio de trabajo para obtener una vista previa de su trabajo en un navegador y comprobar cómo funciona el vuelco del vehículo.