We are 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 / faq / faq 2

Frequently Asked Question #2

Question: The Hierarchical Menus script item display is text-based. Occasionally, I need to include an image as part of an item (or as the entire item). How can I do this?

Answer: Although it was never isolated as a feature of the script, it has always been possible (since version 1.0) to include images in menu items.

The item display text in the arrays is inserted into the menu item as HTML, not plain text. Therefore, any HTML included as part of the item display text will be rendered correctly. Simple, non-conflicting, HTML, that is. Images are fine, but keep other HTML to a minimum.

Example:

Let's say we have these three corporate images to be used in a menu, with links to their home page:


WebReference
WR.gif


Netscape
NS.gif


Microsoft
IE.gif

Our menu items would look something like this:

HM_f_SetMenuItems(
 {MenuID:"hm_M1",
  DisplayText:"<img src='WR.gif' width='39' height='30' border='0' align='absmiddle' alt='Webreference.com' />&nbsp;WebReference",
  LinkURL:"http://www.webreference.com/"},
 {MenuID:"hm_M1",
  DisplayText:"<img src='NS.gif' width='39' height='30' border='0' align='absmiddle' alt='Netscape' />&nbsp;Netscape",
  LinkURL:"http://www.netscape.com/"},
 {MenuID:"hm_M1",
  DisplayText:"<img src='IE.gif' width='39' height='30' border='0' align='absmiddle' alt='Microsoft' />&nbsp;Microsoft",
  LinkURL:"http://www.microsoft.com/"}
);

The resulting menu would look like this (assuming you have set the color scheme and other parameters appropriately):

When embedding images within your variable width menu items, you must include width and height settings, either via style sheet directives or included width and height directives. Without these attributes, HierMenus will not know how wide the menu items themselves are supposed to be until after it has already sized them; resulting (typically) in clipped menu items.

Also, beginning with HierMenus 5.3, embedded menu item images can have their own rollover effect when the mouse rolls anywhere over the menu item. See the setup instructions for the HM_o_RolloverImages object for further details.

Internet.com
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: 3/25/2004
URL: http://www.hiermenuscentral.com/documentation/faq/faq2.html