Image map submenu placement

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
jkeep
Beginner
Beginner
Posts: 3
Joined: Mon Jan 24, 2005 10:08 pm

Image map submenu placement

Post by jkeep »

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?
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

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: Select all

<img name="products" id="products" src="products.gif">
Now assume a menu named, "Products". To pop the "Products" menu relative to the image position,

Code: Select all

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: Select all

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
jkeep
Beginner
Beginner
Posts: 3
Joined: Mon Jan 24, 2005 10:08 pm

Post by jkeep »

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: Select all

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

Thanks!
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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
User avatar
John
 Team
 Team
Posts: 5967
Joined: Sun May 19, 2002 8:23 pm
Location: Phoenix, AZ
Contact:

Post by John »

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: Select all

href="..\service\home.cfm"
Why the \ ?
Should be...

Code: Select all

href="../service/home.cfm"
You've also got a loose </cfoutput> in there without an opening tag.

What is this...?

Code: Select all

offcolor=strMenuFontOff;
Syntax errors. All aI statements should end like this...

Code: Select all

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

Code: Select all

aI("text=Specific Requests;showmenu=specific;;separatorsize=1")
Note that you're missing the 2 closing ; - i.e., ;"); I also removed the ;; after specific.
John
jkeep
Beginner
Beginner
Posts: 3
Joined: Mon Jan 24, 2005 10:08 pm

Post by jkeep »

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.
Post Reply