Text Rollovers: Putting the Effect to Work for an Entire Page - Doc JavaScript

Putting the Effect to Work on an Entire Page

You've already seen how to change a link's color and text when the user points at it. As a matter of fact, it's very simple -- you embed a new tag in it. But doing this for each and every link in a document, could be very annoying, and could also increase the document's size -- and its download time as a result. Fortunately, Internet Explorer 4.0 (and Netscape Navigator 4.0x in a similar fashion) features event bubbling, which enables you to capture events that occur anywhere in the document. Even though this column does not discuss event capturing in general, we will show you the basics so you can globalize the "color change" effect. Take a look at the following JavaScript statement:

document.onmouseover = rollon;

This statement assigns the function named rollon() to handle any onMouseOver event that occurs on the page. With event bubbling, an IE 4.0 innovation, events can be captured at the document level. You do not need to create separate event handlers for each element that will participate in the effect. For example, should the author add HTML to the page, these additional elements would participate in the event model without changing a single line of script. Note that the document object is the "super parent" for all elements in the document body. You can refer to the actual element that generates the event as:

window.event.srcElement

In order to identify the links that are playing this game, we'll assign each one a specific class. Here are the general class definitions for this example:

<STYLE TYPE="text/css">
<!--
.item {
  color: blue;
}
.highlight {
  color: red;
}
// -->
</STYLE>

An explicit style definition is convenient in this case, because it enables you to add other style definitions to the link's default state and its "highlighted" state. Thus, if you want a link to play this game (to change its color, for example) you should use the item class:

<A CLASS="item" HREF="https://www.microsoft.com/">Microsoft</A>

Regardless of the user's browser, the link should appear normal at this stage. Here's the preceding link "in action":

Microsoft

Note that you should not use any of these classes for any element other than a link that should participate in the game. Take a look now at the entire script that defines the event-handling functions and assigns them the corresponding events:

<SCRIPT LANGUAGE="JavaScript">
<!--
function rollon() {
  if (window.event.srcElement.className == "item") {
    window.event.srcElement.className = "highlight"; // change class
  }
}
function rolloff() {
  if (window.event.srcElement.className == "highlight") {
    window.event.srcElement.className = "item"; // change class
  }
}
// assign rollon() to handle onMouseOver events
document.onmouseover = rollon;
// assign rolloff() to handle onMouseOut events
document.onmouseout = rolloff;
// -->
</SCRIPT>

If the event's source element has an item class, the script assigns it a highlight class, which changes its color. On the other hand, if the event's source element has an highlight class, the script assigns it an item class, which changes its color back to the default one. Although it may seem as if the conditional statement in each of the functions is not necessary, it is actually very important, because it solves the browser-compatibility issues. Furthermore, if this statement was not present, the rollover effect would have applied to all elements on the page (not only the desired links), including but not limited to plain text.

It is also very important to understand why the two global statements in the script do not generate an error on older browsers, which do not support the document.onmouseover and document.onmouseout properties. Since all JavaScript-enabled browsers support the document object, it is legal to define a new property for an existing object. Thus, the following statement would also be fine (but useless):

document.blablabla = "Tomer Shiran";

Now that you know why this script is compatible with all browsers despite the fact that it currently only influences Internet Explorer 4.0, it's time to take a look at a few links that use this technique. Here they are:

Webreference
Doc JavaScript
Dynamic HTML Lab

If you're using Internet Explorer 4.0, each link turns red when you pass the mouse over it. The exact syntax for this set of links is as follows:

<A CLASS="item" HREF="/">Webreference</A><BR>
<A CLASS="item" HREF="/js/">Doc JavaScript</A><BR>
<A CLASS="item" HREF="/dhtml/">Dynamic HTML Lab</A>

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