HierMenus CENTRAL: HierMenus In Progress. HierMenus 5.3 Release Notes (2/7)

[previous] [next]

Setting Up HM Rollovers

As mentioned on the previous page, setting up your rollovers in HM is a two step process, where you add images to your menu item descriptions using standard HTML, and then add the HM_o_RolloverImages object to your page to indicate to HM which of the embedded images will be "rollover enabled," and what the actual rollover images will be for those items. Let's look at these two steps in detail.

Adding Images to Menu Items

You can add images to menu items in the same way you add images to any other location of an HTML page, via standard, HTML <img> tags. This is by no means a new feature of HM, since HM has always supported the insertion of basic HTML formatting directly into menu item descriptions. There is, however, one important attribute of embedded images that you must be sure to include if you want them to be rollover enabled.

Each image that you embed into a menu item description that you intend to be rollover enabled must contain a name and/or id attribute that is unique to that image. The name attribute is required for Netscape 4.x compatibility; the id attribute is used in all other browsers. If you're not concerned with supporting Netscape 4.x in your implementations, then you don't need to include the name attribute on your images (and HM will respond by simply not applying the image rollovers if a Netscape 4.x browser does happen to hit your page). You should always, however, supply an id attribute if you want the image to be rollover enabled. If both name and id are supplied, they should both be set to the same value.

Do not prefix the image id/names with the term HM_Img unless your intention is to create rollover image groups (see the advanced topics below for further information on image groups).

The exact HTML you use to embed the images within your menu items is up to you, but we recommend keeping the image code as light and simple as possible. Here are some (line wrapped) examples:

["<img src='someimage.gif' 
   id="someImage" name="someImage" height='10' 
   width='12' alt='dot' />3-D Animation",
   "somepage.html",1,0,0],
["<img src='item1.gif' 
   id="menuItem2" name="menuItem2"
   height='30' width='100' alt='Menu Item 2' />",
   "item1page.html",1,0,0],

As is often the case with our examples, the above menu items are line wrapped here for clarity on this Web page. They will typically appear as single line items in your own menu item entries.

Before we leave the issue of embedded <img> coding, note one other important, but oft overlooked point about the HTML. When embedding images in menu items it's important to specify a width and height for the image, either via img tag or style sheet attributes. Without a height and width the browser won't know how much space to reserve for the images themselves; and if the browser doesn't know, then HM won't know either. The result is that the initial display of menus on your page will most likely be incorrect; since HM has to guess at the menu item dimensions (in many cases the image will not yet be downloaded before HM sizes the menu items).

The HM_o_RolloverImages Object

Having included images within your menu item entries, you complete the rollover setup process by adding the HM_o_RolloverImages object to your HM_Arrays.js file. Technically, the HM_o_RolloverImages object can be defined anywhere on your pages prior to the loading of the actual HM scripts themselves. But since its functionality is so tightly bound to the menu items it makes the most sense to simply define it in the same place you define your menu arrays.

The syntax of the HM_o_RolloverImages object is as follows:

HM_o_RolloverImages = {
   Image ID 1:"source of rollover image 1",
   Image ID 2:"source of rollover image 2",
   ...
   Image ID n:"source of rollover image n"
}

Note especially the following:

1. The object is always called HM_o_RolloverImages.

2. A single pair of curly brackets ({}) encloses all of the ID/source image pairs.

3. Within the curly brackets, pairs of image ID's and their corresponding rollover images (the actual URL location of the rollover image itself) are designated. The image ID should be the exact same value used in the id and name attributes of the image. Be sure to use the same case that you did when defining the image. A single colon should separate an image ID from its corresponding rollover image location, and the image location itself should be quoted. (There is one exception to the "exact name" identification described here. See the group image rollover discussion in the Advanced Topics section below for further information.)

4. Each ID/source pair is separated by a comma. The last ID/source pairing must not be followed by a comma.

Let's have a look at a complete HM_Arrays.js example, based on the example images supplied above. Again, the menu items in this example will be line wrapped for clarity on this Web page; but the HM_o_RolloverImages object is specified here exactly as you would place it in the HM_Arrays.js file:

HM_o_RolloverImages = {
   someImage:"someimageOver.gif",
   menuItem2:"https://mydomain.com/images/item2Over.gif"
}
HM_Array1 = [
[130,,,],
["<img src='someimage.gif' 
   id="someImage" name="someImage" height='10' 
   width='12' alt='dot' />3-D Animation",
   "somepage.html",1,0,0],
["<img src='item2.gif' 
   id="menuItem2" name="menuItem2"
   height='30' width='100' alt='Menu Item 2' />",
   "item2page.html",1,0,0]
]

And that's all there is to it! The image in the first menu item (which is initially someimage.gif) will be replaced with someimageOver.gif on rollover; and the image in the second menu item, item2.gif, will be replaced with https://mydomain.com/images/item2Over.gif.

Preloading Images

No image rollover discussion is complete without mentioning image preloading. When an image is swapped on mouseover, the rollover script assigns the source (URL) location of the new rollover image to the actual image container that is defined on the page. If that new image has not previously been loaded by the browser, then it (the browser) must retrieve the new image from the server before displaying it. This retrieval process often takes a moment or two, during which the display of the image on the page is blank. The net effect is that the rollover behavior of the page--especially if there are many rollovers processed in sequence--looks at best, sluggish, and at worse, broken.

To avoid this sluggish behavior, many Webmasters elect to preload their rollover images. By loading the "new" rollover images ahead of time into the browser's cache, the image swap (which occurs later), can happen instantaneously. The tradeoff is that the image preloading will itself take some time; however, this time is typically absorbed as part of the initial page load, or scheduled to occur just after the Web page is completely loaded.

When loaded, the HM 5.3 scripts will automatically preload all of the images listed in the HM_o_RolloverImages object as well as any designated more image graphics. In some cases, Webmasters may wish to disable this behavior; either because they're already preloading their required images via some other means, or because the images are very small and the "sluggish" effect described above is negligible. You may disable HM's built in image preloading behavior via a new global and page specific configuration parameter, HM_PreloadImages.

 HM_GL_PreloadImages and HM_PG_PreloadImages

Description:

Indicates whether or not HM should preload rollover images and its own more images. If true, images are preloaded; if false, image preloading is bypassed.

Value:

Boolean (true/false,1/0) or any expression that evaluates to a true/false value.

Comments:

This parameter was first introduced in HM 5.3.

If you are already preloading your images via some other means, set this variable to false to avoid duplicate processing. Note also that HM will include its own more images in its preloading behvior; therefore images may be preloaded even if you do not specify an HM_o_RolloverImages object. Again, if this behavior is undesirable, set this parameter to false.

Examples:

Images should not be preloaded:

HM_GL_PreloadImages = false;

But images should be preloaded on just this page:

HM_PG_PreloadImages = 1;

Default:

True. HM preloads images by default.

Advanced Rollover Topics

HM_Array1 = [
[150,,,],
["<img src='dotoff.gif' width='16' height='12' alt='dot'
   id='imgItem1_1' name='imgItem1_1' />Menu Item 1",
   "page1.html",1,0,0],
["<img src='dotoff.gif' width='16' height='12' alt='dot'
   id='imgItem1_2' name='imgItem1_2' />Menu Item 2",
   "page2.html",1,0,0],
["<img src='dotoff.gif' width='16' height='12' alt='dot'
   id='imgItem1_3' name='imgItem1_3' />Menu Item 3",
   "page3.html",1,0,0],
["<img src='dotoff.gif' width='16' height='12' alt='dot'
   id='imgItem1_4' name='imgItem1_4' />Menu Item 4",
   "page4.html",1,0,0],
["<img src='dotoff.gif' width='16' height='12' alt='dot'
   id='imgItem1_5' name='imgItem1_5' />Menu Item 5",
   "page5.html",1,0,0],
["<img src='dotoff.gif' width='16' height='12' alt='dot'
   id='imgItem1_6' name='imgItem1_6' />Menu Item 6",
   "page6.html",1,0,0],
["<img src='dotoff.gif' width='16' height='12' alt='dot'
   id='imgItem1_7' name='imgItem1_7' />Menu Item 7",
   "page7.html",1,0,0],
["<img src='dotoff.gif' width='16' height='12' alt='dot'
   id='imgItem1_8' name='imgItem1_8' />Menu Item 8",
   "page8.html",1,0,0],
...

var imgPre = "<img src='dotoff.gif' "+
             "width='16' height='12' alt='dot' ";
HM_Array1 = [
[150,,,],
[imgPre+"id='imgItem1_1' name='imgItem1_1' />Menu Item 1",
   "page1.html",1,0,0],
[imgPre+"id='imgItem1_2' name='imgItem1_2' />Menu Item 2",
   "page2.html",1,0,0],
[imgPre+"id='imgItem1_3' name='imgItem1_3' />Menu Item 3",
   "page3.html",1,0,0],
[imgPre+"id='imgItem1_4' name='imgItem1_4' />Menu Item 4",
   "page4.html",1,0,0],
[imgPre+"id='imgItem1_5' name='imgItem1_5' />Menu Item 5",
   "page5.html",1,0,0],
[imgPre+"id='imgItem1_6' name='imgItem1_6' />Menu Item 6",
   "page6.html",1,0,0],
[imgPre+"id='imgItem1_7' name='imgItem1_7' />Menu Item 7",
   "page7.html",1,0,0],
[imgPre+"id='imgItem1_8' name='imgItem1_8' />Menu Item 8",
   "page8.html",1,0,0],
...

HM_o_RolloverImages = {
   imgItem1_1:"https://mydomain.com/images/doton.gif",
   imgItem1_2:"https://mydomain.com/images/doton.gif",
   imgItem1_3:"https://mydomain.com/images/doton.gif",
   imgItem1_4:"https://mydomain.com/images/doton.gif",
   imgItem1_5:"https://mydomain.com/images/doton.gif",
   imgItem1_6:"https://mydomain.com/images/doton.gif",
   imgItem1_7:"https://mydomain.com/images/doton.gif",
   imgItem1_8:"https://mydomain.com/images/doton.gif",
   ...

HM_ImgNN_uniqueid

HM_o_RolloverImages = {
   HM_Img1:"https://mydomain.com/images/doton.gif"
}
var imgPre = "<img src='dotoff.gif' "+
             "width='16' height='12' alt='dot' ";
HM_Array1 = [
[150,,,],
[imgPre+"id='HM_Img1_1' name='HM_Img1_1' />Menu Item 1",
   "page1.html",1,0,0],
[imgPre+"id='HM_Img1_2' name='HM_Img1_2' />Menu Item 2",
   "page2.html",1,0,0],
[imgPre+"id='HM_Img1_3' name='HM_Img1_3' />Menu Item 3",
   "page3.html",1,0,0],
[imgPre+"id='HM_Img1_4' name='HM_Img1_4' />Menu Item 4",
   "page4.html",1,0,0],
[imgPre+"id='HM_Img1_5' name='HM_Img1_5' />Menu Item 5",
   "page5.html",1,0,0],
[imgPre+"id='HM_Img1_6' name='HM_Img1_6' />Menu Item 6",
   "page6.html",1,0,0],
[imgPre+"id='HM_Img1_7' name='HM_Img1_7' />Menu Item 7",
   "page7.html",1,0,0],
[imgPre+"id='HM_Img1_8' name='HM_Img1_8' />Menu Item 8",
   "page8.html",1,0,0]
]

On the next page, new parameters are introduced, providing you with additional control over the vertical positioning of your more images.

[previous] [next]