Text Rollovers: Workarounds for Netscape Navigator 4.0x - Doc JavaScript

Workarounds for Netscape Navigator 4.0x

As you already know, the color-changing rollover works in Internet Explorer 4.0, but not in Netscape Navigator 4.0. Although Navigator's users cannot benefit from this effect, they can simply view the page as if it didn't feature this effect. However, if you are in favor of equal quality of Navigator 4.0x and Internet Explorer 4.0x, you can attempt to provide a workaround -- a different implementation of the same effect. There are quite a few workarounds, but we will only show you the most convenient one (others are extremely cumbersome and difficult to maintain). For this technique, we'll use features discussed in our previous column, Rotating Text Banners, so you should read that column before jumping into this solution.

Both Netscape Navigator 4.0x and Internet Explorer 4.0 enable you to dynamically update HTML code. Thus, you can update a link's color by modifying its entire code. First take a look at the following HTML definition:

<SPAN ID="netsc" STYLE="position: absolute">
<A CLASS="item"
   HREF="https://www.netscape.com/"
   onMouseOver="swapClass('Netscape', 'netsc', this.href,
                          'item', 'highlight', true)">Netscape</A>
</SPAN>

* Notice the different colors. We use them to stress two literals that must be identical.

You must use such a definition for each link on the page. It consists of a link embedded in a  tag. At this point, you're probably surprised to see that the link does not feature an onMouseOut event handler. This will be crystal clear after we explain the JavaScript functions used to create this effect. Pay attention to the function's third argument, this.href. This property reflects the link's HREF attribute, so you don't need to specify it literally in the function call.

Once you've defined the links, you need to insert the global code, which is responsible for the actual effect. We will use an external script to do this, but feel free to use an internal one if you prefer. Here are the general declarations, consisting of two scripts and a style sheet, which must be present at the top (<HEAD>...</HEAD>) of each page:

<LINK REL="stylesheet" TYPE="text/css"
      HREF="workaround.css" TITLE="rolloversheet">
<SCRIPT LANGUAGE="JavaScript">
<!--
function swapClass() { }
// -->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="workaround.js"></SCRIPT>

The real swapClass() function is located in the external script (workaround.js), so, in order to avoid JavaScript errors on browsers that do not support external scripts, you must define an empty function in the internal script. The <LINK> tag imports a style sheet, as explained in the previous section of this column. Simply paste the following code in workaround.css, the imported style sheet:

.item { color: blue }
.highlight { color: red }

In our example, the color of a link is blue, and it turns red when the user passes the mouse over it. Play with these colors until you get the desired effect.

Since this rollover effect is actually a workaround, its script is a bit more difficult than the Explorer version. First copy and paste the following script in workaround.js:

var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var NS4 = (bName == "Netscape" && bVer >= 4);
var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);
function display(id, str) {
  if (NS4 || IE4) { // if browser supports style sheets
    if (NS4) { // if Navigator 4.0+
      with (document[id].document) {
        open(); // open document
        write(str); // write to document
        close(); // close document
      }
    } else { // Internet Explorer 4.0+
      document.all[id].innerHTML = str; // "assign" to element
    }
  }
}
function swapClass(text, spName, urlName, oldName, clName, over) {
  if (bVer // old browser
    return; // terminate the function
  }  
  // create a new string for the link
  // change the link's class to clName (it was oldName before)
  var str = "<A CLASS='" + clName + "' HREF='" + urlName + "'";
  if (over) {
    // replace onMouseOver with onMouseOut
    // replace true with false
    str += " onMouseOut=\"swapClass(\'" + text + "\', \'" + spName +
           "\', \'" + urlName + "\', \'" + clName +
           "\', \'" + oldName + "\', false)\">";
  } else {
    // replace onMouseOut with onMouseOver
    // replace false with true
    str += " onMouseOver=\"swapClass(\'" + text + "\', \'" + spName +
           "\', \'" + urlName + "\', \'" + clName +
           "\', \'" + oldName + "\', true)\">";
  }
  str += text + "</A>";
  display(spName, str); // update the code
}

The browser detection routine and the display() function should be clear from the previous section (and previous column). The swapClass() function is invoked by each link's onMouseOver event handler. It rewrites the link in the "highlight color," which is red in our example. This function accepts six arguments, in order:

text, which is the link's actual text.
spName, which is the value of the  tag's ID attribute.
urlName, which is the link's URL.
oldName, which is the name of the old class (the one that defines the current color of the link).
clName, which is the name of the new class (the one that defines the desired color of the link).
over, which is a Boolean variable specifying whether the link is currently in its standard color (as opposed to its highlighted one).

The swapClass() function first constructs the code for the updated link, and then invokes the display() function to actually update the link. Since the mouse pointer is currently on the link, if over is true, i.e. the link is currently in its regular color and has an onMouseOver event handler, then the function replaces onMouseOver with onMouseOut. The fourth and fifth arguments, oldName and clName, are swapped, so it performs the reverse action next time the function is executed. Read the comments in the body of the script for more details on the function's algorithm.

Although this script works fine on both Navigator 4.0x and Internet Explorer 4.0, and doesn't cause problems on other browsers, there is one major restriction. It can only be used for links at the end of a line, due to the absolute positioning (which is required). For the same reason, the link should be followed by   (that's   x 2). Check out our previous column for more information on this restriction.

Finally, take a look at a working example of the "workaround effect."

Created: October 9, 1997
Revised: December 4, 1997
URL: https://www.webreference.com/js/column4/workaround.html

Text Rollovers: Workarounds for Netscape Navigator 4.0x - Doc JavaScript

Workarounds for Netscape Navigator 4.0x

Find a programming school near you