Text Rollovers: What's Good and What is Just Plain Bad

By Joe Burns

...use these to jump around or read it all
[Hooray for Text-Based Navigation]
[Visited and UnVisited: Same Color?]
[Multiple Color Groups]
[Highlight It!] [Underline or No Underline?]
[Uhhhh...Don't Do This]

According to the Web Content Accessibility Guidelines: Guideline 13. Provide Clear Navigation Mechanisms.

That's a nice academic way of telling the author of Web pages that the most important person to any site is the user and that user must be able to easily find his or her way through the site.

Since the beginning of HTML Goodies, I have pushed the concept of content being king. It is my opinion that if a site has the content that people want, the author can mess up just about any other area and still be successful. Allow me to expand upon that.

If a site has the content that people want AND easy, clear navigation, you can mess everything else up and be successful.

OK...I'm kidding, or maybe I'm not.

In this tutorial, I'm going to discuss my thoughts regarding creating and using text-based link rollovers. I think it's a true help to users when they see an effect as their mouse passes over a link. I think it adds to creating clear navigation. You just have to use the rollovers correctly in order to provide help in navigation rather than knocking the user out of his or her seat.


Hooray for Text-Based Navigation!

I am a fan of text-based navigation. That means offering clickable text rather than active images. It seemed that, at one time, almost every site had gone to an image-based navigation system because of the neat image-flip rollovers that are so easy to construct.

However, I think the tide may be turning back to using text navigation thanks to the CSS rollovers. Here's an example of what I mean:

Roll Your Pointer
Over This Link

I have set the text size of the link to +3 in order to show the rollover, not because I think links should be that big, mind you. The effect is achieved by setting up to four CSS commands either as inline STYLE attributes within the A HREF tag or, more commonly, as a style block between the HEAD tags. I used style blocks on this specific page.

You may have already seen this code, but here it is nonetheless:

<STYLE TYPE="text/css">
a:link { color: blue; text-decoration: none }
a:active { color: red; text-decoration: none }
a:visited { color: blue; text-decoration: none }
a:hover { color: green; text-decoration: underline }
</STYLE>

Here are the basic concepts:

  • a:link affects all unvisited anchor tags
  • a:active affects anchor tags when being clicked
  • a:visited affects anchor tags representing visited links
  • a:hover affects anchor tags when the mouse is on top of them.

  • color: sets the color
  • text-decoration: sets underline (among other things)
    • underline if you want one
    • none if you don't

Look at the code, roll your pointer over the link, and you can pretty much pick out all the effects. Keep a sharp watch on how you use the colons and semi-colons. They REALLY matter. Equal my code.

The commands, except hover, run on all Internet Explorer and Netscape browsers 3 and above. Hover works on IE browsers 3 and above and on Netscape 6 browsers.

Now, on to my opinions...


Visited and UnVisited: Same Color?

Joe's Opinion #1: I feel that the link and vlink colors should always be set to the same color so that there is not a color difference between a visited and unvisited link.

Many people disagree with me because the way of the Web, from the start, was to offer a different link color for both. If that's the only reason for following the two-color pattern, I don't think it's a good enough reason.

I say that because when you set up a site, you decide on a color scheme and by allowing multiple colors to pop up in there, you break that scheme. If the visited and unvisited colors are all the same, then the page will always look as you want it to look each time a user arrives, no matter what pages he or she has visited in the past.

Furthermore, when you set two color schemes, even if both colors are complimentary, your page often starts to look haphazard with just pockets of a new color here and there.

I just don't think that there is enough of a reason to let a user know they have already visited a page to set to different colors.


Multiple Color Groups

That said, I can see a situation where your page has distinct sections of color, each containing links. In that case, you may need to set multiple link rollover color schemes. Here are a couple:

One Scheme

Another Scheme

I set up the two different color schemes by setting up a class system on the page. Here's the rollover code:

<STYLE TYPE="text/css">
a.dog:link { color: blue; text-decoration: none }
a.dog:active { color: red; text-decoration: none }
a.dog:visited { color: blue; text-decoration: none }
a.dog:hover { color: green; text-decoration: underline }

a.tree:link { color: green; text-decoration: none }
a.tree:active { color: yellow; text-decoration: none }
a.tree:visited { color: red; text-decoration: none }
a.tree:hover { color: orange; text-decoration: underline }
</STYLE>

Notice how I have the two sections separated, one listed as dog and the other as tree. That sets up two classes. I can now call on those classes using the CLASS attribute in the anchor tag. Like so:

<a href="zonk.html" class="tree">One Scheme</a>
<a href="zonk.html" class="dog">Another Scheme</a>


Blue? Purple?

Joe's Opinion #2: The color purple should not be used for an unvisited link and blue should not be used for visited links.

The Web does have some traditional color choices and these are the biggies. Using the color in an "incorrect" fashion just doesn't look right.


Highlight It!

I like this effect. If it's used correctly, it can be equally as effective as an image rollover. Dig this:

Highlight

Here's the text that created it. Note that the new coding is in bold.

<STYLE TYPE="text/css">
a:link { color: green; text-decoration: none }
a:active { color: yellow; text-decoration: none }
a:visited { color: green; text-decoration: none }
a:hover { color: green; text-decoration: underline; background: #F9EDED }
</STYLE>

Joe's Opinion #3: When using the highlight method, the highlight color should not be at all shocking. It should be quite pale offering just a highlight.

Joe's Opinion #4: When using a highlight, the text hover color should not change. The highlight is the winner here.
One color change will be enough.


Underline or No Underline?

Joe's Opinion #5: If link text is sitting on the page in such a fashion that an underline will not affect the formatting around it, then I would suggest you can either use an underline at all times or just when the hover occurs.

Joe's Opinion #6: If an underline will affect formatting, like if a link is sitting within paragraph text, don't use an underline, either to begin with or on the hover. Paragraphs look bad when there are varying amounts of space between lines. The underline of a link creates that extra bit of space you don't want.

The hover command is all-encompassing. Elements that sit around the link will move if the hover wants an underline. If anything moves when you perfom the rollover, lose the underline.


Uhhhh...Don't Do This

(Unless you have a darn good reason)

I am quite sure that you can come up with examples whereas the following three methods work well. In fact, if you take a look at the Goodies Navigation Bar (on the left), you'll see that I've changed the rollover font. That's the first thing I tell you to be careful of below.

Notice though that my navigation bar links do not affect anything that sits around the links. That's the key to using one of these. Does it affect what's sitting around the link?

I am simply stating that the changes below are very dynamic and affect all that sits around them. Your format must remain stationary. The link rollover effect is not more important than your page's format.

Let me state that again:

The link rollover effect is not more important than your page's format.

In short, don't use these unless you've got a very good reason and, "I think it's really cool" is not a good reason.

You can make it so that a new font appears upon rollover. Watch the text below it move.

New Font


You can make it so that when rolled, the text expands or shrinks. Again, watch the text move.

New Font Size


You can make it so that the text becomes bold when you rollover.

Bold


I've even seen pages where the rollovers became italic.

Italic


Some might say that the two just above, bold and italic, would not have moved the text below if I hadn't placed an underline as well. That might be true, but the rollovers certainly would have affected text that sat on the same line. Notice that both of the links expanded.

Here, in order, are the codes that will create the effects above. The code that actually created the effect is in bold.

<STYLE TYPE="text/css">
a.link { color: green; text-decoration: none }
a.active { color: yellow; text-decoration: none }
a:visited { color: green; text-decoration: none }
a.hover { color: orange; text-decoration: underline; font-family : Verdana, Arial, Helvetica, sans-serif; }
</STYLE>

<STYLE TYPE="text/css">
a.link { color: green; text-decoration: none }
a.active { color: yellow; text-decoration: none }
a:visited { color: green; text-decoration: none }
a.hover { color: orange; text-decoration: underline; font-size:40pt }
</STYLE>

<STYLE TYPE="text/css">
a.link { color: green; text-decoration: none }
a.active { color: yellow; text-decoration: none }
a:visited { color: green; text-decoration: none }
a.hover { color: orange; text-decoration: underline; font-weight: bold}
</STYLE>

<STYLE TYPE="text/css">
a.italic:link { color: green; text-decoration: none }
a.italic:active { color: yellow; text-decoration: none }
a:italic:visited { color: green; text-decoration: none }
a.italic:hover { color: orange; text-decoration: underline; font-style: italic}
</STYLE>

Joe's Opinion #7: If the rollover causes elements around the link to move so the effect can be generated, avoid the effect. Keep your format steady.


That's That

I am a fan of text-based navigation. It helps the page to load faster because there aren't two images for every link and the effect is realized right away rather than the flip taking a second to run because the second images hasn't quite loaded.

But if you're going to use the effect, use it wisely. I hope this helps.

Enjoy!

[Hooray for Text-Based Navigation]
[Visited and UnVisited: Same Color?]
[Multiple Color Groups]
[Highlight It!] [Underline or No Underline?]
[Uhhhh...Don't Do This]


Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •