Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

  • Print
  • + Share This
From the author of

2. Graphic Rollovers (Without JavaScript)

Having a graphic bullet change its appearance when the user rolls over an HTML link is a time-honored and effective way to show visitors that they’ve placed their mouse over something clickable. However, in the past this effect relied on often-finicky JavaScript to swap images in and out. With CSS, you can get the same effect even more quickly than with JavaScript.

The trick is to use the background attribute with the different link states—with each state having a different version of the graphic. Repeat the graphic only once and then set the padding for the link so that the text is offset enough so that it does not cover the graphic bullet.

The yellow light bulb graphic is actually a background image behind the link text.

When the mouse pointer rolls over the link, the light bulb seems to glow. Actually, a new background image has replaced the initial image.

EXAMPLE:

http://www.webbedenvironments.com/dhtml_css_advanced/examples/graphicRollovers

  • + Share This
  • 🔖 Save To Your Account