| home / experts / dhtml / column56 |
|
| Click for Menu |
Click the link on the left to display a menu tree. Click off the tree anywhere on the page to hide. |
Two new parameter variables have been introduced to create the rollover:
HM_GL/PG_ImageSrcOver (paired with the existing HM_GL/PG_ImageSrc)
HM_GL/PG_ImageSrcLeftOver (paired with the existing HM_GL/PG_ImageSrcLeft.)
They have no default value. The default behavior of the HM is to have no image rollover. If you want a rollover, you simply include the relevant parameter in HM_Loader.js (HM_GL_ImageSrcOver or HM_GL_ImageSrcLeftOver) or your page (HM_PG_ImageSrcOver or HM_PG_ImageSrcLeftOver) with an image filename as its value.
For example, let's say you wanted all your menus in all your pages to have an image rollover behavior, with a white image replacing a black image. Most of your menu trees are built in the default left-to-right, but some are right-to-left. You therefore have need of both right-pointing images and left-pointing images on your site.
To specify image rollover behavior for all menu trees site-wide, you can include these lines in HM_Loader.js:
HM_GL_ImageSrc = "HM_More_black_right.gif"; HM_GL_ImageSrcOver = "HM_More_white_right.gif"; HM_GL_ImageSrcLeft = "HM_More_black_left.gif"; HM_GL_ImageSrcLeftOver = "HM_More_white_left.gif";
You have now specified site-wide behavior. Now let's assume you want to change this behavior for some of your pages. Here are a couple of scenarios:
On a certain page, you have a different menu color scheme, and red/yellow images would be more appropriate. On that page, override your global settings by using the page-specific parameters:
HM_PG_ImageSrc = "HM_More_red_right.gif"; HM_PG_ImageSrcOver = "HM_More_yellow_right.gif"; HM_PG_ImageSrcLeft = "HM_More_red_left.gif"; HM_PG_ImageSrcLeftOver = "HM_More_yellow_left.gif";
On another page, you have the global color scheme but do not want the images to rollover. Giving the parameters a null value will cause the menus on the page to be excluded from the image rollover behavior:
HM_PG_ImageSrcOver = null; HM_PG_ImageSrcLeftOver = null;
There are many combinations, of course. Try to use the most efficient combination of global and page parameters. Use page parameters only if you are overriding global settings.
On the next page, the first of our two fixes.
Produced by Peter Belesis and
All Rights Reserved. Legal Notices.
Created: July 12, 2001
Revised: July 12, 2001
URL: http://www.webreference.com/dhtml/column56/3.html
