HierMenus CENTRAL: HierMenus In Progress. HierMenus 5.3 Release Notes (1/7)
  [next] |
HierMenus 5.3: Release Notes
D.M Ragle, October 23, 2003
In this major release of HierMenus, we tackle image rollovers; giving HM the ability to swap images that are embedded within a menu item when it's highlighted. HM's configuration parameters have always allowed implementors to create text based menus complete with separate colors for the "standard" and "rollover" states of menu items. Additionally, images could be embedded within menu items by way of HM's support for HTML syntax within the menu item's description. The missing link, however, has been the ability to supply rollover images--an image that will replace the original, embedded image whenever the menu item is highlighted. Beginning with HierMenus v5.3, rollover images are now directly supported within the scripts.
In addition to the new rollover capabilities, positioning for the standard HierMenus "more" image has been improved. More images can now be vertically positioned to the "top," "middle," or "bottom" of menu items, in addition to the existing positioning scheme which allows the images to be placed at an exact number of pixels from the top of the menu item. Finally, multiple corrections and enhancements were made to the code to better support HTML pages in which the direction (the dir attribute placed in either the <body> or <html> tag) is set to rtl (right-to-left). DHTML developers who have not encountered dir="rtl" pages in their own applications take note: there are several object positioning gotchas--especially in Internet Explorer--that effect your ability to place an object at the proper location on the browser canvas.
As a reminder, though our release articles may be useful to all DHTML developers and HierMenus fans, the HierMenus script itself is a licensed product and its use on your site requires a paid license agreement. Contact John Maher at [email protected] or call him at (203) 662-2889 for further information (be sure to let him know how you plan to use HierMenus and tell him a bit about your organization, as well).
The new functionality for HM 5.3 requires a healthy dose of new/updated documentation (especially for the new image rollover capabilities) and a developer-oriented peek into the DHTML issues we encountered while rolling out the enhancements. These release notes will be separated into two parts: general documentation (pages 1-4) and more detailed information (pages 5-7). The former will be most informative to those actually using (or planning to use) HM on their own sites; while the latter will cover some of the more interesting coding issues encountered with this round of changes. The last page includes a roundup of minor corrections (bug fixes) made to this version of HM. If you're an existing user, be sure to check out that section for behavior problems squashed in HM 5.3.
Sample Pages
Our sample pages demonstrate both frames and non-frames HierMenus displays. Each sample page opens in a new window.
HM samples without frames |
HM 5.3: Ready to Roll
Though not often used, HierMenus has always supported the inclusion of images directly within a menu item. Since HM supports HTML syntax embedded within the menu item's description, placing an image within a menu item is as simple as the following examples, which are line-wrapped here for better display on this Web page:
["<img src='someimage.gif' height='10' width='12' alt='dot' />3-D Animation", "somepage.html",1,0,0],
["<img src='item1.gif' height='10' width='12' alt='Menu Item 1' />", "item1page.html",1,0,0],
Such images, however, would be static: though the background colors of the menu item will change on rollover, the image itself would not. From time to time, HM users have voiced the need to create entirely graphical menus and/or add graphical highlights to menu items that change when the mouse moves over them. Previous HM versions have not supported this functionality; and in fact, trying to implement it directly (by embedding onmouseover and onmouseout calls within the menu item descriptions) was tricky, due to potential conflicts with HM's own higher level mouseover and mouseout calls, both on the item and menu level. Additionally, the HM_KeepHilite behavior, which allows parent menu items to remain highlighted while the user mouses over child menus, was difficult if not impossible to emulate from outside the HM code.
In HM 5.3, images can continue be be embedded within menu items using HTML syntax, just as they were in previous HM versions. Additionally, the source of rollover images may also be specified. When HM encounters a rollover image in a menu item, it will automatically replace the embedded image (however it is embedded into the menu item) with the designated image. Likewise, when the mouse leaves the menu item the original image will be restored.
The exact syntax required for embedding image rollovers in your menu items will be discussed on the next page. For now, note that two key elements must exist to enable rollovers in HM:
The new HM_o_RolloverImages object must be specified. For convenience, this will typically be specified within your HM_Arrays.js file.
The embedded images themselves must contain an id and/or name attribute, which will be used to match the image itself to its rollover counterpart.
Before heading into the detailed instructions for the above steps, have a look at a quick example. The following link, when rolled over, will pop-up a menu with image accents, small icons to the left of the item description that will change when the menu item is highlighted. To set up this menu, the HM_Arrays file was adjusted as follows (partial, line wrapped listing):
HM_o_RolloverImages = {
HM_Img1:"doton.gif",
Img1Off:"dotoff.gif"
}
// Other top level array definitions here
HM_Array80_1 = [
[],
["<img src='dotoff.gif' width='16' height='12' alt='dot'
id='HM_Img1_80_1_1' name='HM_Img1_80_1_1' />3-D Animation",
"/3d/",1,0,0],
["<img src='dotoff.gif' width='16' height='12' alt='dot'
id='HM_Img1_80_1_2' name='HM_Img1_80_1_2' />Design",
"/dlab/",1,0,0],
["<img src='dotoff.gif' width='16' height='12' alt='dot'
id='HM_Img1_80_1_3' name='HM_Img1_80_1_3' />JavaScript",
"/js/",1,0,0],
...
And the result can be seen when rolling over the following link:
On the next page, we document the steps and new parameters you need to know to incorporate rollover behavior into your own designs.
Created: October 23, 2003
Revised: October 23, 2003
URL: https://www.webreference.com/dhtml/hiermenus/inprogress/9/
Find a programming school near you