Cómo hacer un rollover con Dreamweaver

29.04.2005

Cómo hacer un rollover con Dreamweaver

Por Jaime Olmo | 41,186 Lecturas

Crearemos un efecto rollover de una forma muy sencilla en Dreamweaver

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

Comenzaremos asignándole un nombre a nuestro “rollover”. De esta manera nuestro documento estará mas organizado.
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.
En ROLLOVER IMAGE va la imagen que cambiará cuando el curso se coloque sobre la imagen.
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.

Ejemplo del “rollover”

Ejemplo de un menú usando “rollovers”.

Califica esta nota:

(4 votos, promedio: 3.25 de 5)

Loading ...

Sobre el autor

Jaime Olmo
Encargado del sitio de ecodig.com

Comentarios

31 comentarios en total.

aaronmx 09.05.2005 - 16:10 - #

Esta muy bIEN sALUDOS
BURRRITO 18.05.2005 - 10:50 - #

ok, me pafecio muy bueno. considero utilizar este para cuando sean imagenes mas complejas, y cuando sean mas sencillas me voy por algun estilo css.
saludos
alejandro362 18.05.2005 - 17:02 - #

Muy bueno.
Trulala de cordoba 04.07.2005 - 07:57 - #

Holas.
Realmente estas cositas son muy interesantes y gracias por acordarse de los que no conocemos tanto.
No Registrado 06.08.2005 - 20:58 - #

¿Alguien me puede explicar cómo hacer lo siguiente:

quiero tener un listado de categorías y que cuando pase el mouse por cada una, se muestren al costado imágenes.

No se cómo se hace

Mil Gracias

Sil
$0y y0 21.09.2005 - 15:56 - #

Me ha servido de mucho en las últimas páginas que he hecho!!

Gracias.
Carpas Rabanal 25.05.2006 - 04:32 - #

Esta muy bien, yo me complicava la vida con flash.
Un saludo
Yop 25.05.2006 - 10:23 - #

Espero ke visiten este site, tiene un problema con el background pero ya lo reparare je je je bye
ALBERTO 26.05.2006 - 11:39 - #

Son detalles muy utiles, gracias por publicar esto
Bluesoul 10.06.2006 - 19:04 - #

Muy bueno, una pregunta,cuantos pixeles deben tener las imagenes para que no se distorcionen cuando las agrandes o los hagas pequeños??
Ray 30.06.2006 - 08:27 - #

Muchas gracias por publicar estas cositas, de veras que son muy utiles en muchas ocasiones…
Saludos
alexb 13.07.2006 - 09:07 - #

esta muy bueno el efecto de hecho yo lo he utilizado pero haora quisiera saber como le hago para q tambien cambie otra imagen q esta a lado.

Agradesco de ante mano el apoyo.

chao…
Jose David Sumano MArtin 29.07.2006 - 19:41 - #

MUy Bueno (”-”)
pantu 02.08.2006 - 03:54 - #

tengo un mapa de españa .y necesito que alguien me pueda ayudar.para que cuando pase el mouse por las distintas provincias aparezca un cuadro de texto
sara 04.08.2006 - 22:42 - #

“gracias” en verdad por tomarse la molestia de publicar informacion para nosotros los principiantes
Fernando 12.09.2006 - 22:24 - #

maestro
Rodrigo PohyÃº 04.10.2006 - 22:01 - #

Hola que tal? realmente estos comentarios o pequeños tutoriales estan muy buenos, Gracias a aquellas personas que saben y no se guardan lo que saben sino que lo dan. Bye suerte

// http://www.losjovenestop.com.ar //
rancio 12.10.2006 - 06:54 - #

me importa n ledo
nicolas 25.10.2006 - 15:32 - #

Muy bueno. Sencillo y práctico
jOHNNY (venezuela) 26.10.2006 - 16:40 - #

paa no miento esto aca me parece cheveres e aprendido mucho soy nuevo en estos y todos lo que aprendido es por este lado gracia de venezuela
HJones 02.11.2006 - 12:17 - #

muy interesante este efecto y util para aumentar la vistosidad e interactividad de las paginas, lo que no aparace es como hacer que la parte debajo de la imagen se coloree de azul.
orlando 22.11.2006 - 09:16 - #

¿Alguien me puede explicar cómo hacer lo siguiente:

quiero tener un listado de categorías y que cuando pase el mouse por cada una, se muestren al costado imágenes.

No se cómo se hace

Mil Gracias

orlandocea23@hotmail.com
Braulio 10.12.2006 - 07:58 - #

Muchisimas Gracias es un cacho tutorial
seb@s 26.01.2007 - 17:21 - #

sinceramente, excelente, mas que en esto soy nuevo yo.
oriol 15.02.2007 - 11:42 - #

Hola!
La guía está muy bien, muy claro todo. Es de agradecer. Pero tengo un problema: cuando visualizo mi web en el Explorer, los rollovers, flash y otras “animaciones” se bloquean (bueno, es el Explorer quien los bloquea). Alguien me podría echar un cable, xfa!!! Muchas gracias por adelantado!
luis 28.02.2007 - 12:52 - #

esta muy bueno gracais
Luis Quispe Sicha 15.09.2007 - 16:56 - #

Me parece interesante, ya lo puse a prueba y me salio a todo dar, gracias pro al ayuda…
ADRIANA 22.09.2007 - 06:51 - #

MUCHISIMAS GRACIAS … !
Ruben Perez 01.02.2008 - 18:10 - #

Alguien sabe como hacer el rollover pero con texto no con imagen ???
Antonio 01.02.2008 - 23:38 - #

esta bueno, pero deseo saber mas rollover y de los crossover
christian 21.04.2008 - 12:25 - #

hola que tal muy bueno y facil de hacer lo que sucede que yo uso el publisher y cuando quiero pegar el codigo de el rollover que hago me lo acepta pero cuando pongo vista previa el rollover no aparece,me podrias ayudar