Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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