Relative Positioning

Mouse Mouse Over Here   

Click Mouse Here

Absolute Positioning

Invoke Menus from Images/Text and Relative Positioning

You can display a menu panel when the mouse is moved over or clicked on an image, text or hyperlink by using the EZmenu commands "showPanel", "showRelativePanel" and "hidePanel" together with Javascript event handlers "onmouseover", "onclick" and "onmouseout". For example:

<a href=# onmouseover="showPanel('Panel Name', x-coordinate, y-coordinate)" onmouseout="hidePanel()"><img src='picture.gif'></a>

<a href=# onmouseover="showRelativePanel('Panel Name', event)" onmouseout="hidePanel()">Move Mouse Over Here</a>

The difference between showPanel and showRelativePanel is that in the former you can specify the exact position to display the menu, whereas in the latter the menu is displayed at the position of the mouse cursor. (Note that the argument event used in showRelativePanel is a built in javascript keyword. You do not have to vary this.)

Detecting Location of Triggering Images that Move

Sometimes, the image that triggers the menu will move (e.g. with browser resize). As such you may not be able to pass absolute coordinates to showPanel to display the menu, as it may no longer be aligned with the image. To resolve this, some additional functions to detect the location of the image in real time are required. See example.

See Menu Maker input for this menu

See HTML for this page