Un espacio para los entusiastas del web

Cómo hacer un rollover con Dreamweaver

Publicado el 29 de Abril, 2005

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

  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”.

Otros artículos relacionados

Califica esta nota:

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (5 votos, promedio: 3.6 de 5)
Loading ... Loading ...

Comentarios

  1. aaronmx

    Esta muy bIEN sALUDOS


  2. BURRRITO

    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


  3. alejandro362

    Muy bueno.


  4. Trulala de cordoba

    Holas.
    Realmente estas cositas son muy interesantes y gracias por acordarse de los que no conocemos tanto.


  5. No Registrado

    ¿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


  6. $0y y0

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

    Gracias.


  7. Carpas Rabanal

    Esta muy bien, yo me complicava la vida con flash.
    Un saludo


  8. Yop

    Espero ke visiten este site, tiene un problema con el background pero ya lo reparare je je je bye


  9. ALBERTO

    Son detalles muy utiles, gracias por publicar esto


  10. Bluesoul

    Muy bueno, una pregunta,cuantos pixeles deben tener las imagenes para que no se distorcionen cuando las agrandes o los hagas pequeños??


  11. Ray

    Muchas gracias por publicar estas cositas, de veras que son muy utiles en muchas ocasiones…
    Saludos


  12. alexb

    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…


  13. Jose David Sumano MArtin

    MUy Bueno (”-”)


  14. pantu

    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


  15. sara

    “gracias” en verdad por tomarse la molestia de publicar informacion para nosotros los principiantes :)


  16. Fernando

    maestro


  17. Rodrigo Pohyú

    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 //


  18. rancio

    me importa n ledo


  19. nicolas

    Muy bueno. Sencillo y práctico


  20. jOHNNY (venezuela)

    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


  21. HJones

    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.


  22. orlando

    ¿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


  23. Braulio

    Muchisimas Gracias es un cacho tutorial


  24. seb@s

    sinceramente, excelente, mas que en esto soy nuevo yo.


  25. oriol

    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!


  26. luis

    esta muy bueno gracais


  27. Me parece interesante, ya lo puse a prueba y me salio a todo dar, gracias pro al ayuda…


  28. ADRIANA

    MUCHISIMAS GRACIAS … !


  29. Alguien sabe como hacer el rollover pero con texto no con imagen ???


  30. Antonio

    esta bueno, pero deseo saber mas rollover y de los crossover


  31. christian

    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


  32. muzquiz

    para la investigacion que realizo me parec muy bien saludos a todos


Deja tu Comentario

Maestros del Web se reserva el derecho de moderación de los comentarios. Evita utilizar palabras soeces, ataques directos, descalificativos, insultos, de lo contrario tu comentario será eliminado.


Sobre el Autor

Jaime Olmo
Encargado del sitio de ecodig.com

Más artículos de Jaime Olmo
Anuncios por Q

Las Notas en tu correo


Acerca de

Maestros del Web nace cuando intentamos traducir Webmaster al Español. Nacimos orientados al diseño y desarrollo web. Hoy somos un espacio de apoyo para los entusiastas que participan en proyectos en la red.
Leer más de Maestros del Web