Image map submenu placement
Image map submenu placement
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?
Hi jkeep,
(2) Instead of using popup(menuName, 1) use popup(menuName, imgName)
For example, assume the following image
Now assume a menu named, "Products". To pop the "Products" menu relative to the image position,
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:
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
(1) Set the name= and id= attribute inside the image tag. (Both are required for this to work ing IE as well as NS).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.
(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">
Code: Select all
popup('Products', 'products');
Code: Select all
popup('Products', 'products', -150, 100);
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
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
Any suggestions?
Thanks!
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()">
Thanks!
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
Ruth
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...
Why the \ ?
Should be...
You've also got a loose </cfoutput> in there without an opening tag.
What is this...?
Syntax errors. All aI statements should end like this...
You have...
Note that you're missing the 2 closing ; - i.e., ;"); I also removed the ;; after specific.
Also, I'm a bit confused by this in your map...
Code: Select all
href="..\service\home.cfm"
Should be...
Code: Select all
href="../service/home.cfm"
What is this...?
Code: Select all
offcolor=strMenuFontOff;
Code: Select all
aI("text=Specific Requests;showmenu=specific;separatorsize=1;");
Code: Select all
aI("text=Specific Requests;showmenu=specific;;separatorsize=1")
John