Advanced: Activating Events on Mouseover

While the traditional mouse still prefers cheese the mice of the new millennium seem to have a thing for Java's conceptual step-brother, JavaScript. Recent advances in HTML and the surrounding support technologies have given rise to some very cool things that can be done with web pages. In particular the concept of objects has crept into and permeated that old jalopy we all knew as HTML.

This new HTML is "turbo-charged" to say the least. In fact, it is not uncommon to refer to the whole collection of technologies as DHTML or Dynamic HTML. As browsers (versions 4.0+) begin to support the W3C's document object model, HTML tags become object entities whose properties can be manipulated in new and amazing ways.

While all this isn't brand new, wider support for it is. Universal support is not here yet--Microsoft and Netscape still struggle, each contending for its own flavor of standards implementation. Even so, two areas where there is common ground are the events surrounding the mouse and those of dynamic image rendering.

The events generated by a visitor's mouse interacting with a web page can be mated to dynamic image rendering capabilities inherent in both Internet Explorer and Navigator. Because both browsers behave sufficiently like each other, the rest of us can begin doing tricks with the events knowing that most of the traffic on the Internet is using a browser that will allow them at least to view our efforts.

While you can actually use mouse events to trigger a number of different responses such as playing sounds, opening new documents, or performing computations, the response that we will focus on here is the ability to dynamically swap images because of the fact that both browser support this capability so similarly.

Table of Contents

The basics of the technique
Some broader examples
What mouse related events exist?
What event handlers can be used with the events?
Where do we go from here?

The basics of the technique
First you need an event that can be measured, second you need an event handler, and last you need elements that will work with both the event and the handler, and that will behave reliably under the maximum number of circumstances and browsers. JavaScript is the glue that binds these elements together but it is a glue that is still drying in some cases and still being applied in others. We've chosen to illustrate some examples where the glue has dried.

Using JavaScript to create a dynamic image that will respond to mouse related events requires a few basic components. Here is an example exposing those components:

1. Create an image and give it a name. The name is important because it is how you will reference the image when the event occurs. (There are other ways to reference the image such as calling the image through the document object model array but when a web page becomes bloated with many elements using that method makes it very difficult to keep track of specific elements that we want to work with, so we'll stick with the naming method.)

<IMG NAME="my_picture" SRC="my_button1.gif">

2. Create an object with the capability of intercepting an event (this object is the event handler.) It must be able to interact with the image created above. Often this is done using a link because the <A> tag can intercept events and it so easily lends itself to accomplishing very common tasks. Let's use the example of creating a button which can be clicked to view another page. When a mouse is driven over the button it will react to the event by displaying a different picture. Here's how to do it building on step 1:

<A HREF="some_document.html" onMouseOver='my_picture.src="my_button2..gif" '>
<IMG NAME="my_picture" SRC="some_picture.gif">
</A>

Notice that the primary difference between this and any other <A> tag is the addition of the code onMouseOver='my_picture.src="my_button2.gif"'. Here is what this statement is doing:

a. It's telling the <A> tag to intercept an event named "onMouseOver". This event occurs when the visitor drives their mouse OVER anything surround between the <A> and </A> tags.
b. When the onMouseOver event occurs it is telling the object named "my_picture" to change its "src" value. Src stands for "source" and in this case it's the file name of the graphic we are displaying. We are changing the source value to "my_button2.gif" presumably another picture of a button that we've created.

That's it! Simple. Here's a functioning example which uses the events onMouseDown and onMouseUp instead of onMouseOver. MouseDown occurs when the button a pressed down, and MouseUp occurs when the button is released. The example uses two graphics which are swapped based on what the mouse is doing.

Name of Graphic	Graphic
my_button1.gif
my_button2.gif
HTML Code	Effect
<A HREF="#here" onMouseDown='my_picture.src="my_button1.gif"' onMouseUp='my_picture.src="my_button2.gif"'> <IMG NAME="my_picture" SRC="my_button2.gif"> </A>

Some broader examples

Here are a few more examples of some neat tricks that you can incorporate into your web pages. One of these examples uses the onMouseOver event to move an image away from the current area, and another of the examples demonstrates the dynamic text swap that the latest Internet Explorer browsers can do. (You must have Internet Explorer for it to work, Otherwise the text will remain static.) This illustrates the difficulty that you can encounter because you cannot control which browsers your visitors will be using. This text example uses JavaScript to try an determine which flavor browser you are using and then to respond according to the capabilities of your browser. Unfortunately this technique can break under certain circumstances which causes many developers to steer away from dynamic technologies at least until more of the cards settle into place.

What mouse related events exist?

The following mouse related events are available. This table shows the event name and when the first occurrence of browser supported started. (The browsers represented are only Internet Explorer and Navigator.)

What event handlers can be used with the events?

This depends heavily on which browser you are using. Our examples showcase the features of the <A> tag which is pretty robust across MOST current browsers. Internet Explorer has expanded the Document Object Model and exposed the properties of most of the HTML tags to act as event handlers, but because the support either does not exist under Navigator or it is dramatically different when it does you need to pick carefully which tags you will use as event handlers.

Where do we go from here?

Accomplishing more complicated routines simply involves adding additional events to respond to and additional objects to respond with.

While the ability to do just that is possible, it does expose the current Achilles heal of DHTML. For your efforts to work the web browser that your visitor is using MUST have the ability to replace a piece of loaded content WITHOUT reloading the whole page. That's arguably what "dynamic" means.

Internet Explorer version 4.0 and higher do this very well, but unfortunately Navigator does not. Why is this a problem? Because many people use Navigator and if you develop your pages to work with Internet Explorer without considering your Navigator users then you alienate a portion of your traffic. The solution is a catch 22 one which involves sacrificing some of the awesome power of DHTML in favor of the traffic who put up with the lack luster performance of their less functional browsers.

Your best bet is to develop to the lowest common denominator. In this case we are using image swapping combined with mouse events because both are supported by the major browsers and thus are considered to be reasonably safe ground.

While it's exciting that the mice of the new millennium have such progressive interests it is obvious that until the cats are taught greater discipline much of the future will remain up in the air. Until those lessons are learned the rest of us can work toward a future where web developers can tap JavaScript in order to build more stunning content, and web visitors can enjoy those efforts without concerns for compatibility.