Inside Technique : Hover Effects
By Scott Isaacs

In our discussion group (hover over the link!) a question was posed about changing the link color in Netscape Navigator when the mouse is over an element. This is a common question because Internet Explorer supports a CSS psuedo-class, hover, for automatically changing the style of links all without requiring scripting. In Netscape, the answer is it usually can't be done.

We have found a fairly elegant solution for adding text rollovers to Netscape Navigator. While not as simple as using CSS, with a little JavaScript it possible to create custom hover effects for any link on your page. Different from most solutions we have seen, this one works on any link, even those in the flow

Our solution is similar in concept to the image rollover effect. With the image rollover effect, you detect the onmouseover and onmouseout event of an image by wrapping it in an link. The link contains a small script that changes the images source. For the rollover effect to work effectively in Netscape Navigator, the image must be the same size as the original. This is because Netscape Navigator cannot dynamicalliy adjust the document based on any changes in content. Internet Explorer 4.0 can reflow the document allowing the image to change in size.

When examining adding link effects to text you have similar limitations. In Internet Explorer, the hover effect can change any aspect of the link, and the page automatically adjusts. For example, if you change the font-size of the link when the mouse is over it, the document ajusts itself based on the new size of the text. In Netscape Navigator, since the page cannot relayout, the hover effect should not do anything that changes its size.

On the next page, we explain how to author your HTML and the necessary script to create the hover effects. This script only executes in Navigator 4.0 or later. For Internet Explorer, you should continue to use the CSS hover effect as it is more efficient. (Note: Hover over next page for a demonstration).

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.