Question:
Is there an easy way to hide a drop-down tab without using the mouseout, mousemove, or mouseover events? These dynamic drop-down tabs are layered and in a framed page. When I move down the page, I put a transparent rectangle below the menu items so that onmousover I can hide all the drop-down tabs. When I move up to the top frame, I put a two pixel bar across the top of the bottom frame that will also hide the drop-down on mouseover. However, fast movement through these areas doesn’t always activate the onmouseover events of the invisible images. Do you know of a better way to hide these menu items?
Answer:
The problem you describe is not uncommon?most menus rendered in DHTML have much the same problem. The real issue is to determine when the mouse moves off of a given element and onto another one. The mouseover and mouseout events help, but fast motions can often cause these events not to properly fire. With IE4 and IE5, one solution is to make use of three DHTML elements: onmousemove, elementFromPoint, and classes.
You can assign a class to a given HTML element that doesn’t necessarily have any Cascading Style Sheets (CSS) properties associated with it. You can also assign more than one class to a given element. Because of this, you can designate a given class as a “live” class?so long as the mouse is over an element with such a class, the element is visible, but once the mouse moves off of it, then you can perform some event. This is what the onmouseover and onmouseout events are supposed to do, but they must get fired to do their jobs.
However, the onmousemove event remains active at all times. If you apply this event to the body object, then it is always firing, unless you explicitly capture the event with an event.cancelBubble=true call. This simple script shows a way that you can perform a simple status test, but it should be easily extended to your situation:
Untitled This is a test.In this code, the onmousemove event is assigned to the body object and calls getElementName(). This in turn calculates the x and y position of the mouse relative to the client. You can use these points to determine which element the mouse is currently over, and from there what class the element belongs to. If the class is of a specific type (such as our “testClass” defined earlier) then some action can be taken?a given DIV made visible or invisible, a status message changed, and so forth. You should be able to use the same principle to determine whether you are in fact currently over a live object, and hide the drop-downs if you’re not.
