Antes de empezar debes tener dos imágenes (pueden ser JPEG o GIF) para este ejercicio. Una será la imagen original y la otra la imagen del “rollover”.

Fig. 1

Dentro de Dreamweaver (3, 4 ó MX), vamos al área de menú principal hasta encontrar la palabra INSERT. Dentro de INSERT nos movemos a INTERACTIVE IMAGES y ahí escogemos ROLLOVER IMAGE.

Rollover
Fig. 2

  1. Comenzaremos asignándole un nombre a nuestro “rollover”. De esta manera nuestro documento estará mas organizado.
  2. En el área de ORIGINAL IMAGE va la imagen inicial del “rollover”. Esta es la imagen que se mostrará cuando no este el cursor del mouse o ratón sobre ella.
  3. En ROLLOVER IMAGE va la imagen que cambiará cuando el curso se coloque sobre la imagen.
  4. Para terminar verificamos que este marcado donde dice PRELOAD ROLLOVER IMAGE.

Rollover

Opcional. También tienes la opción de añadirle un texto alterno al “rollover”, este se activa cuando el cursor se mantiene varios segundos sobre la imagen. Y además de una dirección web para cuando el usuario de click sobre la imagen.

Rollover
Ejemplo del “rollover”

Ejemplo de un menú usando “rollovers”.