Relative Positioning Mouse Mouse Over 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. |