home / bulletins / 9 / page 2

[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:"http://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 http://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

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 arrays can get quite lengthy. You can significantly reduce the size of these types of arrays 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 array originally looked like this (line wrapped here):

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],
...

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

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],
...

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_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]
]

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

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

[previous] [next]