Web design development. Everything about Creating Mouseover Effects

As the mouse moves around in the browser window, it generates a stream of events describing its movement. HTML lets you define JavaScript code that will be executed when the mouse moves over your links, allowing you to implement your rollover effect. These bits of code are associated with the <A> tag using two attributes: onmouseover and onmouseout.

The value of these attributes is one or more JavaScript statements. The onmouseover script is executed when the mouse moves into the area represented by the link; the onmouseout code is executed when the mouse moves away from the link area.

The code associated with these attributes can be as simple or as complex as you want. If the desired effect is simple, you can place the actual JavaScript right in the attribute value. For more complex actions, you are probably better off writing one or more JavaScript functions and invoking them from these attributes.

Setting the status line

A common rollover effect is updating the status line at the bottom of the browser window. The JavaScript to accomplish this is:

  window.status = 'Status message';

To create a link that updates the status message when the mouse moves over it, use:

  <A HREF="url" onmouseover="window.status = 'Status message';

return true;">

We've placed the desired JavaScript directly into the attribute value, along with return true;. This extra bit is needed to make the browser update the status area. If your JavaScript does not return a true value after execution, the browser will not update the status area. This is true even if you invoke a JavaScript function instead of placing the code directly into the attribute.

The effect is simple. When applied, the mouse passes over the link, the status line at the bottom of your browser window changes.

Unfortunately, when the mouse moves away, the status line is unchanged. To remedy this, change the status line when the mouse moves out using the onmouseout attribute:

  <A HREF="url" 

  onmouseover="window.status = 'Status message'; return true;"

  onmouseout="window.status = ''; return true;">

Fancier effects

All rollovers are implemented using this same basic model: One JavaScript routine for mouse entry, and another for mouse exit. Once you've experimented with the basic idea, you'll soon want to move on to bigger and better rollovers.

The quality of your rollovers is directly proportional to your JavaScript programming skills and your ability to take excerpts out of existing scripts on other Web pages and paste them into your own. While I don't mean "stealing" anyone's work, the best rollover ideas are out there on other sites. If you see one you like, contact the author to ask permission to use the effect, giving proper credit to the creator.

<< BACK

Dealing With Font: Creating Mouseover Effects