Adding Rollovers to Your HTML Without JavaScript

Welcome to my blog, please feel free to subscribe to my RSS feed or leave a comment.

In my last tutorial I showed you how to build a simple horizontal menu in HTML with only a few lines of CSS. Let’s take that same HTML code and use it to increase usability and improve the overall look of your site.

The HTML

This is the same HTML used in our last article:

<div class=’menu’>
<ul>
<li><a href=’index.php’ title=’Home’>Home</a></li>
<li><a href=’about.php’ title=’About Me’>About Me</a></li>
<li><a href=’contact.php’ title=’Contact Me’>Contact Me</a></li>
</ul> 
</div> 

The CSS

In CSS there are a few different states an anchor tag (<a>) can be. You can be:

• a:link - the default state
• a:visited - after you’ve been to the page
• a:active - after you’ve clicked it but before you’ve left the page
• a:hover - when your mouse is over the link

To make a page truly optimized for usability we can change the state these menu items appear in.

.menu a:link {
text-decoration: none;
color: #FF0000;
border-bottom: dotted 1px #FF0000;
} 

This CSS changes the color of the links to Red (#FF0000) and removes the underline from the links. Personally, I don’t like the default underlines so I like to replace them with a dotted line instead.

Next we want to assign a special event when the user has placed their mouse over one of your text items. To do this, we affect the a:hover CSS. Also, while I’m in there I am going to add a special event to the a:active CSS which will change the color when the user clicks the link but before they leave the page. This ensures they know they’ve clicked the link.

.menu a:hover {
color: #0000FF;
border-bottom: dotted 1px #0000FF;
} 

.menu a:active {
color: #00FF00;
border-bottom: dotted 1px #00FF00;
} 

Using the two states above, the user is now aware that they’ve entered a clickable zone because the link changes color and when they click the option, it changes color again to let them know they’ve clicked. There you go, three simple CSS commands to make your page more usable.

Other Posts of Interest

• Using CSS to highlight a link
• Using CSS to disguise a link.
• Turning your menu list into menu buttons
• Using CSS to build a horizontal menu
• How to center content with CSS and HTML
• How to make a web site look good in multiple browsers.
• Placing page content in Adobe Dreamweaver
• Structuring your web site with Adobe Dreamweaver
• Better HTML Helps Search Engine Results
• Blog Roundup for the 9th of October 2008