Rollover Menu <div> help

Hello all...

I've a highly customized site and therefore am attempting my own rollover menu function.

For right now I'll give the basics.

I have two divs - a left nav and a right content div.

The left div houses the left navigation and the right content div... well - houses the content.

On mouseover of a left navigation image - I am changing the image to "highlight" and also would like to display a previously hidden div that contains the submenu items.

That is all fine and dandy. My problem is this. When I mouseout of the image - I lose the highlighting and the displayed submenu.

I'm trying to figure out how to make a "handler" of some sort that will cause the image rollover to stay when I move the mouse to go select a menu item in the submenu.

There is probably 5-6 px between the right edge of the image and the right content div (which is where the submenu ends up displaying)...

Can I not catch the mouse position or something or am I limiting myself using the mouseover/mouseout functions or grr... How can I do this?

I can post the JS that I've made and the html source if needed.

Thanks,
Rich

a normal method is to hide the submenu on a mouseout setTimeout
and to clear the timeout on mouseover of the submenu

While you may wish to develop your own menu it sounds as if this menu has a single level which I would term as a tooltip

There are many available

e.g.

http://www.vicsjavascripts.org.uk/ToolTipYoYo//ToolTipYoYo.htm

Excellent. I think I'll give that a go.

In addition - menu systems like APYCOM allow for the "submenu" to have a transparent effect so as to see the content behind the submenu that is displayed.

How does one accomplish this? Is it simply a colored gif with transparency or is it a JavaScript function that sets some CSS property or what?

Im not 100% sure on this.... but I think you just add something to the end of object reference like this.


obj.style.opacity="50%"



Im sure this could also be achieved using style sheets aswell.

just look at the link I posted!