We are currently working on providing HierMenus to you at no cost. HierMenus code requires a confirmed membership with internet.com. Please register by clicking here and come back soon to download your free copy of HeirMenus code.
Click Here to Register

Site Navigation
Bulletins
About
Documentation
FAQ
Samples
Known Issues
Technology Jobs

internet.commerce

Partner With Us














          
internet.com

IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

 
HierMenusCentral Enhance the Functionality of Your Web Site with DHTML HierMenus.
    

home / samples / background images

Background Images

Menu Placer #1

Both menus and items can now include background images. The above permanently displayed menu utilizes a gray gradient background image. Since child menus can be styled independently of their parents, the child menus needn't inherit the same background image that the permanent menu does.

In addition to specifying the image itself, you can also specify the CSS properties of the background image; such as positioning (top, right, etc.) and repeating.

Menu Placer #2 Admittedly, tiled images work best for menus, since they can be repeated regardless of how tall or wide the menu items make your menus. But if you're careful, fixed images can also be used to produce interesting effects, such as the curved edges of the permanently displayed menu to the left of this paragraph.

Be careful with item background images in Internet Explorer 4, which we've found can produce inconsistent results. The menu to the left for example, would not render properly in Internet Explorer 4; requiring us to force the image to not show in that browser; i.e.:

ItemBackgroundImage:(HM_IE4)?null:"curve1.gif",

Finally, though not a native capability of HierMenus, note that it is also possible to setup menu items such that background images are swapped when the menu item is highlighted (rolled over, forced to be permanently highlighted via IsPermHilite, or forced to be permanently selected via IsSelected). To accomplish this, you must utilize HM's ability to style menu items via class name assignments, and then assign the appropriate background images to the style sheet definitions for the class names that you will assign to the menu items.

Consider the menu below, which is similar to the menu at the top of the page:

Menu Placer #3

In this menu, we've set the menu items to initially display a background image (again, we've elected to not support IE4 with this technique) via their default class name assignments (ItemClass), but assigned a different background image to the over and selected class names for the menu items (ItemClassOver, and ItemClassSelected). This results in the swapping of the background images as the item class names themselves are swapped for the menu items. Here are the style sheet rules we assigned to the menu item class names:

.hm_item     {color:black; background:#efefef url('bg_blue.gif')}
.hm_itemOver {color:black; background:#efefef url('bg_yellow.gif')}

See the Using Classes Mini-Tutorial for specific information pertaining to the use of style sheet classes with HierMenus; and for further information on the standard use of background images in HM, check out the reference entries for these configuration parameters:

ItemBackgroundImage
ItemBackgroundProperties
MenuBackgroundImage
MenuBackgroundProperties

Click the link below to have a look at the configuration file we used to generate these sample menus:

bgimages.js


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

Created: 3/25/2004
Updated: 5/18/2004
URL: http://www.hiermenuscentral.com/samples/bgimages.html