JavaScript Text Rollovers

Introduction

When I first published this text rollover method, I didn't expect anyone to want to use it — as I explained, they caused Netscape 4.00 through 4.05 to crash. I was surprised by the number of people who have contacted me saying that they're using this method.

I've modified the script a bit. It now works with Netscape 6, and I've disabled it for Netscape 4.00 through 4.05. I'm hoping that this solves the crashing on 4.00-4.05, but I don't have a copy of Netscape that old and haven't tested it to be sure.

Text rollovers are very easy to do in Netscape 6 and IE 4 and up. You simply use the a:hover style sheet property. Unfortunately, Netscape 4 does not support a:hover.

In this tutorial, I'll show how to use one method of creating a text rollover effect that works in Netscape 4.06 and up, in Netscape 6, and in IE 4 and up. The effects don't work in older browsers, but they don't cause any ill side effects in those browsers.

You don't need to know JavaScript to use this technique. I'll provide a script that you can just cut and paste. You will need to know a little about CSS style sheets, though, to be able to specify the styles and colors for your text.

This technique is based on a tutorial I found a Doc Javascript, which you can find at:

http://www.webreference.com/js/column4/

I've made some improvements to the script presented in that tutorial. I've added the capability of including a TARGET attribute in the links. I've developed a method that lets you use text rollovers for links that appear in the middle of a line — the tutorial at Doc Javascript only works for links that are the last thing (or only thing) on a line. And I've changed the code a bit to support Netscape 6.

This method is not a perfect one. If you move the mouse too rapidly over the link, the color doesn't change back in Netscape. Also, I haven't been able to make this method work for links that are inside a table.

In the link above, I have set up the rollover text to have a different font size, font face and background color than the normal text. IE supports that capability easily with a:hover and will move other things around when necessary to accomodate the newly sized text. The method I'm presenting here, however, replaces the text inside an absolutely positioned span element. If you increase the size, the other items on the page do NOT move around to accomodate it. You need to leave adequate empty space to accomodate the text or things will be displayed on top of each other. The method I'll present for handling links that are in the middle of a line require that the new text have exactly the same size and font as the normal text, or things won't look good at all.