This menu panel is displayed over a dummy image![]() of the same dimensions |
Inline Menu Positioning (e.g. Anchor to Table Cell)
Sometimes, instead of positioning the menu with fixed coordinates, you might want to do inline positioning, such as anchor the menu to a table cell (resize this window to see the effect). Here are the steps: (1) Design the webpage as usual, and in the location (e.g. table cell) where you would like to place the menu, put a dummy image (e.g. 1px by 1px transparent gif) instead, stretch it to the same height and width as the menu, and give it a name, e.g. <img id='marker' name='marker' width=100 height=20 ....> (2) Copy and paste the functions displayMenu and imgXY from this page onto your page. (3) Call displayMenu on page load from the body tag, i.e. <body onload="displayMenu()" ...>. What displayMenu does is to call imgXY to detect the coordinates of the dummy image and then pass these coordinates to showPermPanel to display the specified menu panel at the dummy image's location. Note that displayMenu on this page assumes that the dummy image is named 'marker' while the menu panel to be displayed is named 'Bar'. If you use different names, please modify displayMenu accordingly. |