Simulating Onmouseout Event for Web Page Layers

Introduction
In HTML a layered element can be created with a CSS absolute position property and a high z-index value. A situation where such a layered element is found on web pages is with a menu set. A menu set is always displayed to cover elements behind it.

Imagine that such a layered element is a Table element with items (hyperlinks) in its table cells. Assume that the table has an unmouseout event. Your hope may be that when the mouse pointer goes out of the table, the unmouseout event will be triggered calling a client script function that will remove the table (menu set) from the screen. In practice, this is not achieved because as the mouse pointer moves within the Table from one element to another inside the Table, the onmouseout event is triggered. The onmouseout event is not only triggered when the mouse pointer moves completely out of the layered (table) element; it is trigerred as it moves from one element to another inside the Table.

In this article I show you how to use the onmouseover and onmouseout events to simulate the onmouseout event for the layer element and solve the problem. You need basic knowledge in HTML, CSS and JavaScript to understand this article. I carried out my experiments with the browsers, Internet Explorer 6, Mozilla Firefox 2, Netscape 8, Opera 9 and Safari 3.

Note: If you cannot see the code or if you think anything is missing in this article (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Demonstration of Problem
In the following code, you have a DIV element. This DIV element has a Table element. The Table element has a value of absolute for its position property. It has a z-index value of 20. So it covers the elements in the normal CSS flow. The Table has an onmouseout event, which should display 'Mouse Out' when the mouse pointer goes out of the table. The Table has three rows. Each row has one cell. Each cell has three hyperlinks. Try the code (save it and open it in a browser).

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

hyperlink

0hyperlink

1hyperlink

2
hyperlink

10hyperlink

11hyperlink

12
hyperlink

20hyperlink

21hyperlink

22

Web page content below layer . . .

As you move the mouse pointer within the table, the onmouseout event is triggered under the following conditions: when the mouse pointer, moving within a row goes onto a hyperlink; when the mouse pointer goes from one row to another; when the mouse pointer, moving within a hyperlink goes out of the link onto a row; when the mouse pointer goes out of the table.

The onmouseout event is not triggered under the following conditions: when the mouse pointer moves within one hyperlink; when the mouse pointer mouse within a row and does not go out of the row or onto a hyperlink.

Test 1
In the above code, replace the onmouseout event code, onmouseout="alert('Mouse Out')", with, onmouseover="alert('Mouse Over')" . We are now testing the onmouseover event. So you should try the code with the change made. As you move the mouse pointer over the Table, the onmouseover event is triggered under the same conditions as the onmouseout event except for the case when the mouse pointer goes out of the Table. When the mouse pointer goes out of the Table, the onmouseover event is not triggered. The result here does not apply to Safari 3.

Test 2
In the above code, add the onmouseout event code again (see code to add below):

onmouseout="alert('Mouse Out')"

So you now have two events for the Table: the onmouseover and the onmouseout events. Try the code again. You should notice the following: the two events are triggered under the same conditions except when the mouse pointer goes out of the table, when only the onmouseout event is triggered. Also note that when both events are triggered, the onmouseout event is triggered first. Just note that when the mouse pointer just enters the Table only the onmouseoever event is triggered; that is logical and for the purpose of this article, it is all right.

Application
Here I talk about application of simulated onmouseout event. Imagine that the above Table was a menu set, and you want that when the mouse pointer goes out of the menu set, the menu set with all its menus should disappear. We know that the behavior of the onmouseout and onmouseover events are similar, except when the mouse pointer goes out of the table (menu set), when only the unmouseout event occurs. We also know that the onmouseout event occurs first. Note that the time difference between the occurrences of the two events is negligible.

When you have a Table as a menu set, it is good to simulate the onmouseout event with the onmouseover and onmouseout events.

Algorithm
In this section I give you the algorithm to take off the Table (menu set) when the mouse pointer goes out of the Table.

- When the onmouseout event is triggered, it sets a Boolean variable to true and calls a function that should remove the Table after 1 second.
- If the onmouseout event occurred, when the mouse pointer went out of the Table, then the table would be removed. That is, if that were the last onmouseout event, then the table would be removed. When the function removes the Table, it sets the Boolean variable to false just in case the Table is redisplayed and the process of moving the mouse pointer over the table is repeated.
- If that were not the last onmouseout event then the onmouseover event will immediately be triggered. This onmouseover event sets the Boolean variable to false.
- Before the function called is executed after one second of its call, it checks if the Boolean value is true. If it is true it removes the table. If it is false, it does not remove the Table. So, if the onmouseout event were not the last onmouseout event, then the Table would not be removed because the onmouseover event that followed, would have set the Boolean variable to false.

Coding
The start Table tag is now,

You can see the code for the two events. The onmouseout event sets the Boolean variable, mouseOut to true and then call the removeTable() function, passing the ID of the Table as reference. This Boolean variable is declared in the JavaScript. The onmouseover event sets the Boolean variable to false.

The JavaScript
The JavaScript has the Boolean variable, mouseOut. It has the function, removeTable(), which has the ID of the Table as parameter. This function checks if the Boolean variable is true after 1 second. From the algorithm, the Boolean variable will be true after one second, only when the mouse pointer has left the Table. This is because, within the one second, the onmouseover event sets the Boolean variable to false. If the Boolean variable is true the function removes the table. Whenever the function removes the table, it sets the Boolean variable to false. It uses the setTimeout() function. This is the JavaScript:

var mouseOut;

function removeTable(ID)
{

setTimeout(function ()
{
if (mouseOut == true)
{
document.getElementById(ID).style.display = "none";
mouseOut = false;
}
},
1000);
}

The Table is removed by setting the value of its CSS display property to "none".

A Menu Set
If you were dealing with an actual menu set, you will have to modify the code so that it removes the rows of the table, leaving the first row. I will not address that in this article.

Performance
Even though the onmouseover event did not work Safari 3, the complete code works with safari 3. The complete code works with all the browsers mentioned above. These browsers are major browsers. So you can use the rules outline in this article in your projects.

Complete Code
The complete code can be downloaded from,

http://www.cool-mathematics.biz/downloads/mouse-events.zip

It is in a zip file, you will have to unzip it to get the HTML file.

Conclusion
When a layer element has other elements, the layer element's onmouseout event does not work as it should. You need to combine the onmouseover and onmouseout event for the layer element, in a special way (see algorithm above) to simulate the onmouseout event.

Chrys