Web Design Blog

Button rollovers are a must when it comes to navigating a professional website. Navigating through websites can be hard when you are unsure of what page you are currently on, button rollovers show visitors to your site, what category they are in, or what page they are currently visitng. It also gives your site a feeling of, “this is a professional website”.

Some examples of button rollovers: (move your mouse over the menus)
http://www.utahdecor.com (rollovers non-animated)
http://www.walkfasttalkloudandsmile.com (rollovers non-animated)
http://www.mortgagesaver101.com (Animated rollover buttons)

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

This entry was posted on Wednesday, January 10th, 2007 at 11:51 pm and is filed under Features. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.