|
home / bulletins / 9
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 can be appreciated by and may
be useful to all DHTML developers and HierMenus fans, the HierMenus script itself is
a licensed product and its use on your site(s) requires a paid license agreement. Contact
Barry Pullen
or call him at (203) 662-2868 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 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:
[Because our navigation menus on the left are being generated by HierMenus version
6, the example below must also be generated by HierMenus version 6. But the rollover
effect is the same in HierMenus 5.3. -Ed]
Roll Over for Rollovers
On the next page, we document the steps and
new parameters you need to know to incorporate rollover behavior into your own designs.
 
[next]
|
