Non-Graphical Rollovers for IE5

In this article, I will demonstrate how to utilize CSS and inline JavaScript to create non-graphical rollovers for Internet Explorer 5.x. The code listed below takes advantage of mouse events to modify page elements. For this example, I have devised four buttons to be used for navigation. When the user rolls over a button in IE 5x, the outer border of the button turns red. When the mouse is rolled over the link enclosed inside the button, the link text also turns red. Both of these actions are controlled by rules determined in a style sheet.

First, let's take a look at the style sheet.

<style>

td
{ border-style: solid;
border-width=thin;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
color: #000000 }

.over
{ border-style: solid;
border-color: red;
border-width=thin }

.out
{ border-style: solid;
border-color: gray;
border-width=thin }

A:hover { color: red }
A:link { text-decoration: none; color: black }
A:active { color: #E4E4E4 }
A:visited { text-decoration: none; color: gray }

</style>

The rules of this style sheet will dictate what happens when the mouse rolls over elements on the page and inline JavaScript will apply the rules. The inline JavaScript in the above style sheet affects table cells by way of the table cell tag <td>, two class selectors (.over and .out), and four anchor pseudo classes.

A breakdown of the specific rules follows…

Type Selector (Applied to the TD Element)

border-style: solid

This rule tells the table that its individual cell borders will be solid. Borders can also be dotted, dashed, double, groove, ridge, inset, and outset.

border-width=thin

The borders will be thin. Borders can also be thick. The default (that is, when no value is specified within the string) is medium.

font-family: Verdana, Arial, Helvetica, sans-serif

Indicates what font to use. Multiple values are set in order of preference. The desired font here is Verdana. If Verdana is not found, Arial will be used, and so forth in order of preference. If none of the styles listed are encountered, a generic sans-serif face will be used.

font-size: 9pt

While the values for font size can be expressed in different ways (i.e., xx-small, medium, xx-large, etc.), in this instance the value is set to a point size, which is an absolute measurement based on typeface (other absolute units of measurement include centimeters, millimeters, and picas).

font-weight: bold

Determines font character thickness, or boldness. This can be expressed numerically from 100 to 900 as well.

color: #000000

This specifies what color the font will be in hexadecimal value. #000000 is black in hex triplet lingo.

Class Selectors (.over and .out)

Next, we encounter two class selectors in our style sheet. Used with inline JavaScript, these are used to modify the borders upon mouse rollover.

onMouseOver="this.className='over'" onMouseOut="this.className='out'"

As you can see, the JavaScript references either class selector, depending on the position of the mouse.

.over
{ border-style: solid;
border-color: red;
border-width=thin }

.out
{ border-style: solid;
border-color: gray;
border-width=thin }

The only difference between these two rules is the color specified for the border (when the mouse rolls over the border, it changes to red, and when the mouse rolls off the border it turns gray). This creates a rollover-like effect, similar to a more conventional image-based rollover. The obvious difference is that an image does not have to be loaded, nor does an image preload script need to be included.

Anchor Pseudo Classes

Finally, we have the anchor pseudo classes, which control different aspects of the <A> element. <A>, of course, stands for anchor, and with HREF becomes a clickable link to another document.

A:hover { color: red }
A:link { text-decoration: none; color: black }
A:active { color: #E4E4E4 }
A:visited { text-decoration: none; color: gray }

Let's cover these in the order they appear in the style sheet.

First, we have hover, which is a Microsoft devised CSS pseudo class. In the example above, when the mouse is passed over the link, and lingers there for a second, the link color will turn red until the mouse is moved off the link.

A:link sets the color of the link, which is black. We have also set a rule for text decoration. Simply put, in this instance, text-decoration makes sure that the link is not underlined, which is the browser default.

A:active makes the link text invisible when it is clicked, or activated. The hex color specified is the same color as the background of the table cell that makes up the button.

<td bgcolor="#E4E4E4">

Lastly, A:visited makes the link gray after the link is clicked and followed. Again, as with A:link, the underline of the link is switched off with the text-decoration attribute.

Complete Code

Here is the code for our document in its entirety.

<html>
<head>
<title>Untitled</title>

<style>

td
{ border-style: solid;
border-width=thin;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
color: #000000 }

.over
{ border-style: solid;
border-color: red;
border-width=thin }

.out
{ border-style: solid;
border-color: gray;
border-width=thin }

A:hover { color: red }
A:link { text-decoration: none; color: black }
A:active { color: #E4E4E4 }
A:visited { text-decoration: none; color: gray }

</style>

</head>

<body bgcolor="#FFFFFF">

<table width="160" border="0" cellspacing="2" cellpadding="5">
<tr>
    <td bgcolor="#E4E4E4" onMouseOver="this.className='over'" onMouseOut="this.className='out'">
        <a href="products.html">PRODUCTS</a>
    </td>
</tr>
<tr>
    <td bgcolor="#E4E4E4" onMouseOver="this.className='over'" onMouseOut="this.className='out'">
        <a href="shopping.html">SHOPPING BASKET</a>
    </td>
</tr>
<tr>
    <td bgcolor="#E4E4E4" onMouseOver="this.className='over'" onMouseOut="this.className='out'">
        <a href="who.html">WHO WE ARE</a>
    </td>
</tr>
<tr>
    <td bgcolor="#E4E4E4" onMouseOver="this.className='over'" onMouseOut="this.className='out'">
        <a href="contact.html">CONTACT US</a>
    </td>
</tr>
</table>

</body>
</html>

Copy and paste the above code into an HTML document and preview it in IE 5.x to see the rollover effect.

The nice thing about the code is that it is not destructive in Netscape. In other words, Netscape will render the document but will not display the IE-specific tricks detailed above. It will display the table, cell background color, and the links therein and will ignore everything else.