Navigation
  • Home
  • Recent
  • Most Active
  • Popular
  • Blog
  • Credits
  • RSS
  •   Interaction
  • Register
  • Statistics
  •   Help
  • Suggestions
  • Contact Us
  • How to Edit
  • Help



  • [Edit]


    This article is about a web design. For other uses see Rollover (disambiguation)

    Rollover refers to a button as created by a web developer or web designer, found within a web page, used to provide interactivity between the user and the page itself. The term rollover in this regard originates from the visual process of "rolling the mouse cursor over the button" causing the button to react (usually visually, by replacing the button's source image with another image), and sometimes resulting in a change in the web page itself.

    Rollovers can be done by imagery, text or buttons. The user only requires 2 images/buttons (with the possible addition of "alt" text to these images) to perform this interactive action.
    Rollover imagery can be done either by a program with a built-in tool or script coding. The user will have to pick a first image and select an alternate secondary image. A mouse action will have to be set to either "click on" or "mouse over" in order for the rollover to be triggered. Note that when the "mouse over" moves on the image, the alt image/secondary image will appear but won't stay - when the user "mouses out" by moving the mouse away from the image, the original source image will reappear.


        Rollover (web design)
            Coding
            Different types of rollovers
            See also

    top

    Coding
    There are different ways unto creating a rollover, while software and programs as a tool already perpared to make it easier to create a rollover. This is an example of a rollover in CSS and HTML:

    CSS
    a
    a:hover
    a span

    HTML
    Wikipedia

    top

    Different types of rollovers
    While rollovers are not in themselves animated images, some users and HTML experts have managed to create animation-like effects.

      Zooming rollovers: when the mouse is moved over an image/text or button, it increases its size, depending on the limit size the user sets. link
      Fading rollovers: when the user moves the mouse over an image/text or button, it either fades in or out, depending on the user control link
      Disjointed rollovers: when the mouse is moved over an image or button, other ares on the screen change to reflect what will happen if the user clicks.

    top

    See also
     
    Search more:
     

       
    Source Privacy License Download Contact Us Atlas
    Scientus.org Dictionary (Yet Another Wiki) RC : 1.39
    MIT OpenCourseWare
    This article is licensed under the GNU Free Documentation License [copyleft]. It uses material from the Wikipedia article "Rollover (web design)". link