Rodando por encima...

Aunque el título se oye raro, es la traducción cuasicorrecta y medio mal interpretada por mí del término Rollover (la traducción más cercana de roll over sería "darse la vuelta", pero ya ven que me gusta andar inventado...). Independientemente de las traducciones, en una página güev un rollover es una imagen que se sustituye por otra cuando el cursor del mouse está encima de él y vuelve a la primera imagen cuando el cursor del mouse se va a otro lado.

Antes de hacer cualquier otra cosa, hay que crear las imágenes que se van a sustituir. Esto se puede hacer en un sin fin de programas que hagan dibujos y los dejen en formato JPG, GIF o PNG (hasta el Paint, pese a ser tan chafa, sirve). Yo generalmente uso Photoshop porque ya estoy acostumbrado a sus malas mañas, jeje. Muchos prefieren usar Fireworks porque se integra muy bien con Dreamweaver (como los dos originalmente eran hechas por la misma compañía, Macromedia). Aquí pongo el botón que voy a usar: la primera imagen es para el estado normal (cuando el cursor del mouse está en otro lado) y el segundo se va a mostrar cuando el cursor del mouse esté encima de él.


Ok. Con estas imágenes, ya podemos usarlos en Dreamweaver. En Dreamweaver creo una nueva página en mi sitio, voy al menú Insert, Image objects y Rollover image. Esto se ve en la siguiente figura:


Al seleccionar esta opción, aparece la siguiente ventana:


Las opciones de esta ventana son las siguientes:

• Image name: el nombre que se le va a dar al rollover.
• Original image: el archivo que contiene la imagen en estado normal.
• Rollover image: el archivo que contiene la imagen que aparecerá cuando pasa el mouse por encima.
• Preload rollover image: siempre deja este tachado. Esto le indica a Dreamweaver que al cargar la página, primero cargue a la memoria la imagen del estado rollover antes de mostrar el botón.
• Alternate text: texto que aparecerá en el lugar del botón en caso que el navegador no lo pueda desplegar.
• When clicked, go to URL: la liga a la que va a ir si le dan clic sobre el botón.

En este ejemplo, llené la ventana con estos datos:


Al darle clic sobre el botón Ok mi ventana de la página se ve así:


Al previsualizar mi página con Firefox (me gusta mucho más que el Internet Explorer), si mi mouse no está sobre el botón, se ve así:


Y al posicionar mi mouse sobre el botón, se ve así:


Espero que esta información te sea útil. Si quieres otro ejemplo (aunque está apegado a Dreamweaver MX), haz clic aquí. ¡Hasta la próxima!