February 21, 2000 - Entire-Page Rollover Effects

February 21, 2000 Entire-Page Rollover Effects Tips: February 2000 Yehuda Shiran, Ph.D. Doc JavaScript

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":

<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

<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>

Learn more about text rollovers in Column 4, Text Rollover.