JavaScript Text Rollovers

The JavaScript

OK, let's get down to nuts and bolts.

Probably the best way to use this script is to place in into a .js file. (If you're not familiar with .js files, I have a page that talks about them in the section on image rollovers.) I have created a txtroll.js file that contains the script and a txtroll.html file that you can copy into each HTML page where you want to use the script. You can download both files here.

If you prefer not to use a .js file, just code script tags in the head section of your page and copy the txtroll.js file between them like so:

<script language="javascript" type="text/javascript"> <!--

   (copy txtroll.js here) 

//--> </script>

This is the txtroll.html template file:

<script language="javascript" type="text/javascript"> <!--
  function urlOver () {}  // Defined in txtroll.js
//--> </script>
<script language="javascript" type="text/javascript" src="txtroll.js"></script>

The first three lines define a dummy version of urlOver() that does nothing. This is for the benefit of Netscape 2 and IE 3, which don't support .js files, and prevent those browsers from issuing alerts. It's also protection in case the txtroll.js file cannot be found.

The last line includes the txtroll.js file. You'll need to upload that file to your web site. If it's in a directory other than the one your HTML file is in, you'll need to adjust the src attribute. For example, src="scripts/txtroll.js".

This is the txtroll.js file:

//====================================================
//  Text rollover script
//  Written by Larry Coats
//====================================================


//====================================================
//  Global variables for text rollovers
//====================================================
var gbIe4 = false, gbNs4 = false, gbNs6orIe5 = false;
if (document.layers && parseFloat(navigator.appVersion) >= 4.06)
  gbNs4 = true;
else if (document.getElementById)
  gbNs6orIe5 = true;
else if (document.all)
  gbIe4 = true;
var gbDhtml = gbNs4 || gbIe4 || gbNs6orIe5;

//====================================================
//  urlOver() - mouseover effects for text URLs.
//====================================================
function urlOver (
          zsTxt,        // Text to be displayed
          zsId,         // ID of span tag
          zsUrl,        // URL being linked to
          zsTar,        // Target
          zsOldClass,   // Current class
          zsNewClass,   // New class
          zbOver)       // True=mouseover, false=mouseout
{
  if (!gbDhtml) return;
  var xsArgs = "'" + zsTxt + "','" + zsId + "','" +
      zsUrl + "','" + zsTar + "','" + zsNewClass + "','" +
      zsOldClass + "',";
  var xsEvent = 'onmouseover';
  var xsBool = "true";
  if (zbOver) {
    xsEvent = 'onmouseout';
    xsBool = "false";
  }
  var xsStr = '<a class="' + zsNewClass + '" href="' + zsUrl + '" ' +
      'target="' + zsTar + '" \n   ' +
      xsEvent + '="urlOver(' + xsArgs + xsBool + ')">' +
      zsTxt + '</a>';
  if (gbNs4) {
    with (document[zsId].document) {
      open ();
      write (xsStr);
      close ();
    }
  }
  else if (gbIe4) document.all(zsId).innerHTML = xsStr;
  else document.getElementById(zsId).innerHTML = xsStr;
}

Now, let's look at how you use this script.

A normal link like you're used to coding looks something like this:

<a href="xxx.html">Click here</a>

It'll look a bit more complicated when you add the code for the text rollover:

<span class="abs" id="someid">
<a href="xxx.html"
   onmouseover="urlOver('Click here','someid',this.href,'','urln','urlo',true)"
   class="urln">Click here<a>
</span>
<br />

On the next pages, I'll describe in more detail how to set up the CSS style sheets and on what the components of this code are.