Image map submenu placement

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:56

Image map submenu placement

Poster: jkeep
Dated: Monday January 24 2005 - 21:10:58 GMT

I am attempting to use the menu with an imagemap for the first time and was wondering if there is a way to position the appearing submenus relative to the original image. By default they pop-up relative to the cursor on the image map. I'd like them to pop up off to the side of the image instead. Is this possible?

Poster: kevin3442
Dated: Monday January 24 2005 - 21:46:59 GMT

Hi jkeep,

jkeep wrote:

...was wondering if there is a way to position the appearing submenus relative to the original image. By default they pop-up relative to the cursor on the image map.

(1) Set the name= and id= attribute inside the image tag. (Both are required for this to work ing IE as well as NS).

(2) Instead of using popup(menuName, 1) use popup(menuName, imgName)

For example, assume the following image

Code:

Now assume a menu named, "Products". To pop the "Products" menu relative to the image position,

Code:

popup('Products', 'products');

I believe the default is to match the top-left corner of the menu with the bottom-left corner of the image. The base location of You can add a third and fourth parameter to the call to popup() to provide a top and left offset, respectively, to move the position where the menu will open relative to the image position. Offsets are in px, where negative values offset up or left and positive values offset down or right. For example:

Code:

popup('Products', 'products', -150, 100);

Would open the "Products" menu 150 px above and 100 px to the right of the "products" image.

Note also that, if you already know the absolute location where you want the menus to pop open, you can just set the top and left locations in the menu definitions themselves.

You can read more about popup() and other built-in functions here.

Hope that helps,

Kevin

Poster: jkeep
Dated: Tuesday January 25 2005 - 2:56:52 GMT

Hi Kevin. The information helped greatly, but I'm still having problems with positioning it somewhere other than the default bottom left location. I took a look at the documentation you pointed me to but am drawing blanks.

If you take a look at
http://www.keepinteractive.com/test/test.html, you'll see what I mean. If you mouseover "Library of Information", the menu appears at the bottom right corner even though I'm calling it using

Code:

<area shape="rect" coords="38,63,200,93" href="#" onmouseover="popup('categories','navbar',-400,200)" onmouseout="popdown()">

Any suggestions?

Thanks!

Poster: Ruth
Dated: Tuesday January 25 2005 - 5:24:19 GMT

You will need to upgrade the menu, for any suggestions to work, most likely. You are way downlevel and changes, fixes, additional functions etc have been done since Oct. 2003. It's not even a final release, it's an early beta release, RC17. You are probably 100+ releases downlevel. We are now out of beta, and version 5.7

Ruth

Poster: John
Dated: Tuesday January 25 2005 - 15:01:39 GMT

Ruth is absolutely correct (as usual). You must upgrade before we can go any further.

Also, I'm a bit confused by this in your map...

Code:

href="..\service\home.cfm"

Why the \ ?
Should be...

Code:

href="../service/home.cfm"

You've also got a loose </cfoutput> in there without an opening tag.

What is this...?

Code:

offcolor=strMenuFontOff;

Syntax errors. All aI statements should end like this...

Code:

aI("text=Specific Requests;showmenu=specific;separatorsize=1;");

You have...

Code:

aI("text=Specific Requests;showmenu=specific;;separatorsize=1")

Note that you're missing the 2 closing ; - i.e., ;"); I also removed the ;; after specific.

Poster: jkeep
Dated: Tuesday January 25 2005 - 15:13:27 GMT

Thanks Ruth and John. I've actually upgraded already and fixed the positioning problem. The other items you posted were leftovers from removing the menu from a dynamic secure page and putting it out on the web for you to view.

Thanks for your help.

Industrial Strength JavaScript and DHTML Menus

Image map submenu placement