Unidad 7. Imágenes (IV)

7.5. Imagen de sustitución. Rollover

Un rollover es una imagen que cambia por otra cuando el puntero se sitúa sobre ella. Este tipo de imagen suele utilizarse en los menús o en los botones para desplazarnos a través de distintas páginas.

Veamos un ejemplo de rollover. Partiendo de las siguientes imágenes

Hemos creado el siguiente rollover. Sitúa el cursor sobre él para ver qué es lo que ocurre.

Para insertar un rollover hay que dirigirse al menú Insertar, Imagen y luego la opción Imagen de sustitución. En la nueva ventana hay que especificar la imagen original y la de sustitución.

Es preferible que la opción Carga previa de imagen de sustitución esté activa. Si se activa, la imagen de sustitución se carga cuando se carga la página, de este modo se evitan las demoras debidas a la descarga de la imagen cuando llega el momento de que aparezca.

El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el que aparecerá en lugar de la imagen en el caso de que por algún motivo ésta no pueda ser mostrada en el navegador.

El texto alternativo puede asignarse a todas las imágenes, no sólo a los rollovers. Puede hacerse a través del campo Alt del inspector de propiedades de la imagen seleccionada.

Para practicar puedes realizar el ejercicio paso a paso Crear Rollovers.

 

Existe una forma parecida de crear estos efectos utilizando CSS, y de hecho son más utilizados. Básicamente consiste en cambiar la imagen de fondo de un elemento. Puedes ver un ejemplo de barra de navegación utilizando CSS en el avanzado Menú CSS .