Creating Roll-Overs with CSS
Many people still use Javascript to create roll-over links. Using Javascript mandates that the developer create at least two different image files for the effect to work correctly. When someone "rolls over" a linked image with their mouse/cursor, Javascript loads another image...hence the name roll-overs. If you're not sure what a roll-over is, sit tight. The problem with using Javascript roll-overs is threefold. First, Javascript can sometimes be problematic for old browsers. Second, using images requires the developer to have access to some kind of image manipulation program such as Photoshop which can be expensive...and creating images can be very time consuming. Third, images take longer to load than a simple CSS text file.
Technically, we will be using something called pseudo-classes to create CSS roll-overs. A pseudo-class is just that; it's not exactly a class of its own, but it does have special functions. Hypertext links or anchor tags (<a>) have special pseudo-classes. Let's add a few lines to our style sheet and I'll show you what I'm talking about.
body {color: black; font-size: 12px; font-family: Helvetica, Arial, non-serif;}
a:link {color: #FF8C00;}
a:visited {color: #FF8C00;}
a:hover {color: #FF8C00; background: #ADD8E6; text-decoration:none;}
a:active {color: #FF0000;}
Explanation: These
four new lines do quite a bit of work with very little time investment.
You'll notice that I've used hex codes instead of color names. #FF8C00
is Dark Orange, #ADD8E6 is Light Blue, and #FF0000 is Red. The first
(a:link) styles all of your links in Dark Orange. That's simple enough.
The second
(a:visited) styles
(or keeps) all visited links Dark Orange...you could easily change the
color of all visited links by changing the hex code or putting
in a
different
color name. The third (a:hover) makes the roll-over effect. When a
user hovers or mouses over the link, the background changes to Light
Blue, the text stays Dark Orange, and the underline disappears.. If
you don't like those colors, just change them for a different effect...make
it
as obnoxious
or as
subtle
as you
want...roll-overs were intended to capture attention. If you want to
keep the underline on the hyperlink, just leave out the text-decoration
declaration and it will default to underline. The last line (a:active)
is optional. The active link is simply the color
that
the
linked text changes to while the new page is loading. If a user has
a broadband connection, many times the new page will load so quickly
that they won't even notice an active link. Users with a dial-up connection, however,
may appreciate this added feature. You should also notice that when you
do this, your <a> tags will inherit all the declarations you wrote for
the rule governing the <body> tag. So they (your links) will also be
12 pixels high, in the same font,
but their colors are different and therefore, the declarations made
earlier in the <body> tag (at least the ones concerning color) are overridden. If you wanted your links to
be bigger or in a different font, you'd simply add those declarations
to the appropriate CSS rules (which in this case are the anchor pseudo-class selectors which we've set up).
Important: When you write your link pseudo-classes in your style
sheet, make sure they appear in the same order as above or the hover
effect/roll-over may not work.
It's very easy to mix up all these stylistic changes to create very profound roll-over effects. You can change the font, the text size, the background color, you can underline the link, remove the underline, and more. It's much, much easier to do this with CSS than with Javascript and images.
