Menu Open Position/Alignment w/ Image Maps

Poster: mj_witt
Dated: Monday November 21 2005 - 15:36:21 GMT

I've just started using the milonic menus, and it's been a fun learing curve. I've gotten everything working as designed, but am having an issue with one of my menus that I can correct.
I've got an image map being used as a menu (see http://www.greenreefbelize.org for the example). Basically, when a user hovers the mouse over a portion of the image, it pops up a menu. Problem comes into play to 'where' the menu pops up. The default behavior has the menu positioning itself just to right and down from where the cursor position is when it hit's the hot spot on the image. Unfortunately, by doing this, the user can inadvertantly hide/make inaccessable other hot spots on the image behind the menu that drops down.
I've tried using the left/right alignment commands to align the menu position to a static 'x' number of pixels from the side of the window. This works (and is the current behavior) as long as the image map is also anchored to the left side of the window. However, what I'd like to see is the image to be centered in the window (no problem, I can get it to do this fine), but then using the left/right alignment commands obvioiusly don't work, because the image position is dynamic based on the users window size, vs. the menu position being static.
So what I'd like to do is to be able to either:

a) align the menu popup to the image rather than the window edge, or
b) align the menu popup to the center of the window rather than the left/right edge, so that the menu and the image flaot dynamically together when the user resized the veiwing window.

Haven't been able to get a "center" command or any other idea to work.

If anyone has any ideas I'd really appreciate it, thanks!

~ MJ

Poster: Andy
Dated: Monday November 21 2005 - 17:15:54 GMT

Hi,

I see that you have used an <AREA> to positon the menu, although this is OK it's not the best solution.

The best way to do what you want is to set the position of the sub menu based on the image itself - please see http://www.milonic.com/menusample24.php for a demo of this.

however, as you image is one big image it can;t really be separated. This means you can either fix the position of the sub menus giving them a top and left position - OR, you can give just a left position and let the menu set the top based on mouse position.

Hope this helps,
Andy

Poster: Ruth
Dated: Tuesday November 22 2005 - 7:12:55 GMT

Hi MJ,

I messed around with this. I couldn't do anything with the image map, but that may be because it's not something I've ever used. Anyway, I didn't know if you absolutely had to have that as an image map since I figured a way to do it just using the menu placed in table cells.

With this you can use the built in subOffsets to offset the submenus if you want.


I would make one suggestion about the offbgcolor of the submenus. Black is a difficult color for anyone with a sight issue and when you get to the bottom two submenus they blend right into the black of the image. You might try #085A9C and see if it suits you.

Hope this helps. Let me know when you've had a look so I can take it down.

Ruth

RE: Menu Open Position/Alignment w/ Image Maps

Poster: mj_witt
Dated: Tuesday November 22 2005 - 14:12:53 GMT

Andy and Ruth - Firstly, a thousand thanks for all the help!!!

Ruth, this is perfect, just the effect that I was looking for. I've downloaded your files, so you can take them down if needed. I really appreciate the efforts, and wll be using your ideas to integrate into the page for Greenreef.

I'll do a post here when it is finished and you can take a look at it.

~ MJ

Poster: Ruth
Dated: Tuesday November 22 2005 - 15:04:44 GMT

Enjoy. By the way, I tested that at 800x600 and 1024x768 and the top part on the right and left expands while everything from the top GreenReef header down stays right in the center. I can't go to a higher resolution cause it messes up all my desktop files so you'll have to test that. I also tested it in IE5.5 and FF1.0.2 and it looks the same. [will wonders never cease ]

We'll wait for your link!

Ruth

Poster: Ruth
Dated: Tuesday November 22 2005 - 15:08:36 GMT

Oops, I forgot to say about the overimages. You don't need those, I just did it so you could see that option. If you need less images, then just remove the overimage= from each of the menu items. And don't forget that submenu offbgcolor. That is actually the color of the dark blue swatch in the menu images and it goes pretty well with your center picture.

Ruth

Poster: mj_witt
Dated: Thursday December 1 2005 - 14:06:29 GMT

Sorry this update took so long, holidays keeping me busy. Thousand tanks again to Ruth for her assistance. It did the trick for what I was looking for.

I've got the website about 80% done if anyone would like to take a look.

http://www.greenreefbelize.org (edited)

~ MJ

Poster: Ruth
Dated: Thursday December 1 2005 - 14:59:15 GMT

I think you need to change the url you posted. Login, come to the post and then click the edit button. That's some travel agency referal or something.

And your center image isn't showing on the correct site http://www.greenreefbelize.org/


Ruth