Page 176 - DCAP408_WEB_PROGRAMMING

Windows Programming

Notes By default, Flyout Menus are positioned with the top-left corner being 2 pixels to the right and
2 pixels above the top-right corner of the image defined with the same tag name as the menu.
Variables can be set to move the menu to the left of the image, or to change the number of pixels
away from the image. For most uses, these variables offer menu position options which are
quite flexible.
However, there may be occasions when menus must be positioned taking more images into
account on the page.

Did u know? The Flyout Menus allow you set up a series of positioning rules for more
complex positioning behavior.
There is quite a bit of complexity when it comes to using this positioning code, so it may take
several tries before the menus appear correctly positioned.

Notes Due to the way its object model and styles are implemented, Internet Explorer for
the Macintosh is very slow at using the complex menu positioning. The explanation for
why this browser is different is in the annotated source.

Complex Positioning Example

As an example, the menus below are set so that they will never cover up the text in the logo
image (overwriting the box is fine), and attempt to not go below the picture image. In either
case, they will try to get as close as possible to having the menu centered vertically with its
arrow image. The exception to these positioning rules is that the menu will always attempt to
not appear off the page, so it will move to prevent that from happening. Keeping the menu
on the page takes precedence over all other rules, and cannot be overridden. If the menu is too
tall to fit at all on the page, it will be positioned so as much of the top-left part is visible as
possible.
This is the source of the menu code which includes the positioning rules:
var newDefs = new Object;
newDefs.overimg = “redarrow.gif”;
newDefs.useclass = “menutext”;
newDefs.position = “IMG|m=m;picture|b>b;logo|b<t”;
flyDefs (newDefs);
makeLayer (“arrow1”, “”,
“This is menu 1”, “It should be positioned”, “so the top edge is
right”,
“under the logo.”
);
makeLayer (“arrow2”, “”,
“This is menu 2”, “It should be centered”, “relative to the arrow”
);
makeLayer (“arrow3”, “”,

170 LOVELY PROFESSIONAL UNIVERSITY