Creación de una imagen rollover en Dreamweaver CS3

En Dreamweaver, imágenes Rollover - como su nombre lo indica - están diseñados para reaccionar cuando alguien tira 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 el cambio como una imagen sustituye a otro. De cualquier manera, Dreamweaver incluye un cuadro de diálogo especial para vuelcos que permite crear un sencillo efecto de rollover una de las conductas más fáciles de aplicar.

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

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

Efectos Rollover requieren por lo menos dos imágenes: una para el estado inicial y otro para el estado de rollover. Puede usar dos imágenes diferentes o dos otros similares, pero ambos deben tener las mismas dimensiones. De lo contrario, usted consigue algunos efectos extraños de escala debido a que 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 se puede hacer referencia a ella. Usted puede nombrar a los elementos lo que quieras, siempre y cuando no se utilicen espacios ni caracteres especiales.

4. En el cuadro de imagen original, especifique la primera imagen que desea visibles. 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, usted puede usar el botón Examinar para buscar y seleccionar la imagen.

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

Si usted no elige hacer este paso, los visitantes pueden experimentar un retraso porque la segunda imagen no se descargará hasta que un ratón se dio la vuelta la imagen original.

7. En el Al hacerse clic, ir a la caja de 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 dirección URL, Dreamweaver inserta automáticamente el signo # como un marcador de posición.

8. Haga clic en Aceptar.

Las imágenes se ajustan automáticamente como un vuelco del vehículo.

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 probar cómo funciona el vuelco del vehículo.