|
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' /> WebReference",
LinkURL:"http://www.webreference.com/"},
{MenuID:"hm_M1",
DisplayText:"<img src='NS.gif' width='39' height='30' border='0' align='absmiddle' alt='Netscape' /> Netscape",
LinkURL:"http://www.netscape.com/"},
{MenuID:"hm_M1",
DisplayText:"<img src='IE.gif' width='39' height='30' border='0' align='absmiddle' alt='Microsoft' /> 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.
|
|
