Create onMouseover menu effects with JavaScript

You've seen rollover menus, whereby a menu item "lights up" when the mouse moves over it. Before 4th generation browsers, the only way to put together such a spectacle was through swapping two images using scripting, one for each mouse state (onMouseover and onMouseout). 

Now, however, with the new capabilities DHTML brings, more and more webmasters are moving away from this approach, resorting to pure scripting to accomplish the rollover. The end results are menu effects that are not only more highly customizable, but more importantly, lightweight (fast downloading). In this article, we'll see how to do it.

Here is an example of a rollover menu effect. It's visible to all DHTML browsers (IE/ NS 4+):

Dynamic Drive
Programmer's Heaven
Page Resource
Web Review
CodeArena.com

The menu bar is created using table columns, with the "highlighting" effect rendered using script.

  In IE 4+ and NS 6...

In IE 4 and NS 6, producing such a visual effect on menus is simple, as both browsers support the onMouseover/ onMouseout events on all elements of a document. This means you can simply include the two events inside the tag you wish to be highlighted when the mouse passes over it, along with code that changes this tag's background color.

Example:

Menu item 1
Menu item 2

Source:

<table width=200>
<tr>
<td onMouseover="this.style.backgroundColor='yellow'" onMouseout="this.style.backgroundColor='white'">Menu item 1</td>
</tr>
<tr>
<td onMouseover="this.style.backgroundColor='yellow'" onMouseout="this.style.backgroundColor='white'">Menu item 2</td>
</tr>
</table>

Simply include the two mouse event handlers inside TD, which in this case acts as the menu items. If you are unfamiliar with the technique used to change the element's background, you can learn about it here.

Ok, time now to move on and see how to enable this effect in NS 4 as well.

In NS 4...

Things get more pesky when it comes to applying rollover menu effects in NS 4, for the browser only recognizes the onMouseover/out events on a <a> and <layer> tag. With the task at hand, we'll need to turn to the later for assistance.

The basic idea is to simply add the two event handlers inside <layer>, suffixed by the code that changes its background color:

<layer width=200px onMouseover="this.bgColor='yellow'" onMouseout="this.bgColor='white'">Testing</layer>

This produces the text "Testing" that turns to yellow (it's background) when the mouse passes over it in NS 4.

To apply the the LAYER concept to real life, ILAYER is usually coupled so the containing content is anchored and displayed inline on the page. With that in mind, the code for a 2 item rollover menu:

Example:

Menu item 1
Menu item 2

Source:

<table width=200>
<tr>
<td><ilayer width=100%><layer width=100% onMouseover="this.bgColor='yellow'" onMouseout="this.
bgColor='white'">Menu item 1</ilayer></layer></td>
</tr>
<tr>
<td><ilayer width=100%><layer width=100% onMouseover="
this.bgColor='yellow'" onMouseout="this.bgColor='white'">Menu item 2</ilayer></layer></td>
</tr>
</table>

Note the presence of <ilayer>...

 

Putting it all together

The good thing about event handlers is that they are simply HTML code, and are ignored by browsers that don't recognize them. IE 4 and NS 6 do not recognize mouse events over a LAYER, while NS 4, over a TD.

Based on that knowledge, creating a rollover menu bar that works cross browser is as straightforward as combining the menu codes in the previous two pages (literally). Take a look at the following cross-browser rollover menu:

<table width=200>
<tr>
<td
onMouseover="this.style.backgroundColor='yellow'" onMouseout="this.style.backgroundColor='white'"><ilayer width=100%><layer width=100% onMouseover="this.bgColor='yellow'" onMouseout="this.bgColor='white'">Menu item 1</ilayer></layer></td>
</tr>
<tr>
<td
onMouseover="this.style.backgroundColor='yellow'" onMouseout="this.style.backgroundColor='white'"><ilayer width=100%><layer width=100% onMouseover="this.bgColor='yellow'" onMouseout="this.bgColor='white'">Menu item 2</ilayer></layer></td>
</tr>
</table>

Menu item 1
Menu item 2

The above effect functions in IE 4, NS 4, and NS 6.

It's important to note that, with one's thinking cap on, the code above can actually be greatly reduced and refined (especially the part pertaining to IE 4/ NS 6).

Related Topics