home / documentation / setup / configuration files / hm_o_rolloverimages

HM_o_RolloverImages

The HM_o_RolloverImages object allows you to define image rollover effects (image swaps) for images that you have embedded within your menu items. Before you can understand how the HM_o_RolloverImages object is used, it is first important for you to understand how images are embedded within menu items.

Setting Up HierMenus Rollovers

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 (typically within your configuration file) 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. 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 rollover 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:

DisplayText:"<img src='someimage.gif' 
   id='someImage' name='someImage' height='10' 
   width='12' alt='dot' />3-D Animation",
DisplayText:"<img src='item1.gif' 
   id='menuItem2' name='menuItem2'
   height='30' width='100' alt='Menu Item 2' />",

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 HierMenus configuration file. Technically, the HM_o_RolloverImages object can be defined anywhere on your pages. 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 items.

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.

5. Unlike other configuration file entries (HM_f_UpdateDefaults, HM_f_SetMenus, etc.) the HM_o_RolloverImages object is not a command; it is simply a static object that HierMenus will look for and utilize later. This is why it uses the standard "=" syntax, as opposed to surrounding the image:source pairs within parentheses.

Let's have a look at a complete configuration file 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 yur configuration file:

HM_o_RolloverImages = {
   someImage:"someimageOver.gif",
   menuItem2:"http://mydomain.com/images/item2Over.gif"
}

HM_f_SetMenus({MenuID:"HM_Menu1",MenuWidth:130});
HM_f_SetItems(
   {MenuID:"HM_Menu1",
    DisplayText:"<img src='someimage.gif' 
      id='someImage' name='someImage' height='10' 
      width='12' alt='dot' />3-D Animation",
    LinkURL:"somepage.html"},
   {MenuID:"HM_Menu1",
    DisplayText:"<img src='item2.gif' 
      id='menuItem2' name='menuItem2'
      height='30' width='100' alt='Menu Item 2' />",
    LinkURL:"item2page.html"}
);

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 http://mydomain.com/images/item2Over.gif.

Advanced Rollover Topics

Repeat Duplicate Info with JavaScript Variables

When specifying a large number of identical rollover graphics, such as an accent image placed next to the text for stylistic effects, your menu item registrations can get quite lengthy. You can significantly reduce the size of these types of configurations via a standard JavaScript technique. Simply define a small JavaScript variable that contains the duplicated code for each menu item, and then refer to that variable within your menu item descriptions.

Let's assume that your file originally looked like this (line wrapped here):

HM_f_SetItems(
   {MenuID:"HM_Menu1",
    DisplayText:"<img src='dotoff.gif' width='16' 
      height='12' alt='dot' id='imgItem1_1' 
      name='imgItem1_1' />Menu Item 1",
    LinkURL:"page1.html"},
   {MenuID:"HM_Menu1",
    DisplayText:"<img src='dotoff.gif' width='16' 
      height='12' alt='dot' id='imgItem1_2' 
      name='imgItem1_2' />Menu Item 2",
    LinkURL:"page2.html"},
   {MenuID:"HM_Menu1",
    DisplayText:"<img src='dotoff.gif' width='16' 
      height='12' alt='dot' id='imgItem1_3' 
      name='imgItem1_3' />Menu Item 3",
    LinkURL:"page3.html"},
   {MenuID:"HM_Menu1",
    DisplayText:"<img src='dotoff.gif' width='16' 
      height='12' alt='dot' id='imgItem1_4' 
      name='imgItem1_4' />Menu Item 4",
    LinkURL:"page4.html"},
   {MenuID:"HM_Menu1",
    DisplayText:"<img src='dotoff.gif' width='16' 
      height='12' alt='dot' id='imgItem1_5' 
      name='imgItem1_5' />Menu Item 5",
    LinkURL:"page5.html"},
   {MenuID:"HM_Menu1",
    DisplayText:"<img src='dotoff.gif' width='16' 
      height='12' alt='dot' id='imgItem1_6' 
      name='imgItem1_6' />Menu Item 6",
    LinkURL:"page6.html"},
   {MenuID:"HM_Menu1",
    DisplayText:"<img src='dotoff.gif' width='16' 
      height='12' alt='dot' id='imgItem1_7' 
      name='imgItem1_7' />Menu Item 7",
    LinkURL:"page7.html"},
   {MenuID:"HM_Menu1",
    DisplayText:"<img src='dotoff.gif' width='16' 
      height='12' alt='dot' id='imgItem1_8' 
      name='imgItem1_8' />Menu Item 8",
    LinkURL:"page8.html"},
...

etc. Using a JavaScript variable, this array can be noticeably shortened:

var imgPre = "<img src='dotoff.gif' "+
             "width='16' height='12' alt='dot' ";

HM_f_SetItems(
   {MenuID:"HM_Menu1",
    DisplayText:imgPre+"id='imgItem1_1' 
      name='imgItem1_1' />Menu Item 1",
    LinkURL:"page1.html"},
   {MenuID:"HM_Menu1",
    DisplayText:imgPre+"id='imgItem1_2' 
      name='imgItem1_2' />Menu Item 2",
    LinkURL:"page2.html"},
   {MenuID:"HM_Menu1",
    DisplayText:imgPre+"id='imgItem1_3' 
      name='imgItem1_3' />Menu Item 3",
    LinkURL:"page3.html"},
   {MenuID:"HM_Menu1",
    DisplayText:imgPre+"id='imgItem1_4' 
      name='imgItem1_4' />Menu Item 4",
    LinkURL:"page4.html"},
   {MenuID:"HM_Menu1",
    DisplayText:imgPre+"id='imgItem1_5' 
      name='imgItem1_5' />Menu Item 5",
    LinkURL:"page5.html"},
   {MenuID:"HM_Menu1",
    DisplayText:imgPre+"id='imgItem1_6' 
      name='imgItem1_6' />Menu Item 6",
    LinkURL:"page6.html"},
   {MenuID:"HM_Menu1",
    DisplayText:imgPre+"id='imgItem1_7' 
      name='imgItem1_7' />Menu Item 7",
    LinkURL:"page7.html"},
   {MenuID:"HM_Menu1",
    DisplayText:imgPre+"id='imgItem1_8' 
      name='imgItem1_8' />Menu Item 8",
    LinkURL:"page8.html"},
...

Rollover Image Grouping

Continuing with the above example, let's have a look at the HM_o_RolloverImages object definition for this menu set:

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

Again, not pretty; not only because of the length of the definition, but also since HM will attempt to preload all of the image pairs listed in the object. To counteract this type of implementation, HM has been taught to recognize Image Groups, that is, a collection of images within the menu arrays that will all be replaced with the same rollover image. To set up an image rollover group, follow this naming syntax when assigning your id and name attributes to your embedded images

HM_ImgNN_uniqueid

where:

1. The name/id always begins with HM_Img.

2. Following the HM_Img prefix is a unique number (integer) that identifies this image group. In the above syntax, this unique number is represented by NN.

3. Following the unique group number is at least one underscore (_).

4. Following the underscore is the remainder of the image id, added to the image id to make it unique for the page. You may select your own naming structure for this uniqueid portion of the image name.

Once your image names are set up as above, you can specify a single rollover image for the group in HM_o_RolloverImages by referring to the image group name; i.e., the HM_Img prefix followed by the group number.

Revisiting our earlier example, let's have a look at how it would look with image grouping applied:

HM_o_RolloverImages = {
   HM_Img1:"http://mydomain.com/images/doton.gif"
}

var imgPre = "<img src='dotoff.gif' "+
             "width='16' height='12' alt='dot' ";

HM_f_SetItems(
   {MenuID:"HM_Menu1",
    DisplayText:imgPre+"id='HM_Img1_1' name='HM_Img1_1' />Menu Item 1",
    LinkURL:"page1.html"},
   {MenuID:"HM_Menu1",
    DisplayText:imgPre+"id='HM_Img1_2' name='HM_Img1_2' />Menu Item 2",
    LinkURL:"page2.html"},
   {MenuID:"HM_Menu1",
    DisplayText:imgPre+"id='HM_Img1_3' name='HM_Img1_3' />Menu Item 3",
    LinkURL:"page3.html"},
   {MenuID:"HM_Menu1",
    DisplayText:imgPre+"id='HM_Img1_4' name='HM_Img1_4' />Menu Item 4",
    LinkURL:"page4.html"},
   {MenuID:"HM_Menu1",
    DisplayText:imgPre+"id='HM_Img1_5' name='HM_Img1_5' />Menu Item 5",
    LinkURL:"page5.html"},
   {MenuID:"HM_Menu1",
    DisplayText:imgPre+"id='HM_Img1_6' name='HM_Img1_6' />Menu Item 6",
    LinkURL:"page6.html"},
   {MenuID:"HM_Menu1",
    DisplayText:imgPre+"id='HM_Img1_7' name='HM_Img1_7' />Menu Item 7",
    LinkURL:"page7.html"},
   {MenuID:"HM_Menu1",
    DisplayText:imgPre+"id='HM_Img1_8' name='HM_Img1_8' />Menu Item 8",
    LinkURL:"page8.html"},
...

As you can see, the result is an easier to read (and shorter) menu definition.