Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:38
Assign ImageMap to Pop-Up manu image... [SOLVED]
Poster: SteveRepp
Dated: Thursday July 14 2005 - 16:17:16 BST
Anyway to do this? The scenario is Base menu is an image map of the world. When the user puts mouse over Asia, an image shows up and I want that image to have an image map assigned.
Poster: Ruth
Dated: Thursday July 14 2005 - 21:00:04 BST
Hi Steve,
I don't think that is possible. This is not really in my line, but looking at the image_map samples, what you have is an html page that has an image on it, and map coordinates assigned, in those coordinates you are using the pop function to pop up and down the different milonic 'submenus' Given that, what it would seem you are wanting to do is to
1. have that html page with the map image and coordinates on it and using the pop function
2. to have the menu that is popped up have as its aI item not a showmenu, header, or url link but another html page with an image and map coordinates assigned.
I could be totally out in left field here. There may be some way to do some function, but off the top of my head these are th solutions I figured out:
1. Use the regular image map as it is now, using the Milonic menu pop function to open submenus, but instead of a submenu, have some function in the 'main_page_data.js file that [as an example] when you mouseover Canada it will give you an item with the canada flag and when you mouseover that it will open another html page with the country map on it. That page would be just like the main page with it's own image map and data.js file for the particular country.
2. Have your main html page use a regular image map that opens the different html page which would have the specified menu on it. For example, you set up the main page with just a usual pop up that onMouseOver of the USA pops a page with the Milonic us image map sample on it, which would use the menu for each of the states.
3. [this I think is the most time consuming] You can place html in the menu, so you could setup an 'image' map using a table. That would entail a lot of work, but it would function. So, when you did a mouseOver of a country on the main image map page, that would pop a menu with the 'image' of the country. Say it's the USA, then since this menu item is a table with images in it, when you click on a state it would have a link in it. I tried it using this as the aI string
Code:
aI("text=<table cellpadding=0 cellspacing=0 border=1><tr><td><a href='page1.htm' target='new'><img src='image1.jpg' width='165' height='165' border='0' alt='go to ceiling section'></a></td><td><a href='page2.htm' target='new'><img src='image2.jpg' width='165' height='165' border='0'></a></td></tr><tr><td><a href='page3.htm' target='new'><img src='image3.jpg' width='165' height='165' border='0'></a></td><td><a href='page4.htm' target='new'><img src='image4.jpg' width='165' height='165' border='0'></a></td></tr></table>;title=this is an image map in a Milonic DHTML Menu;type=html;");
You'll note that I created images that are the same size. If you were to set this up for what you have asked, you would have to figure out how to cut the big image of a country and set up the table so the result is that you get what looks like a 'solid' map of the country.
Perhaps someone advanced in js would be able to figure out someway to 'nest' an image map pop up menu page inside another, but these are the only ways I can figure.
Ruth
Poster: Ruth
Dated: Saturday August 6 2005 - 16:45:57 BST
Hi Steve,
I've been working on this and I did get it to allow an image map in the submenu. I only created 1 image map, but put it in two submenus to see if you could use more than one and it works. But, you can only have one submenu level if you use an image map from the original image map page.
I'll give you the info for what I did so you can use it and test it. One thing I found is you have to be extremely careful when you code in the submenu. I tried doing copy and paste for the map positions and it kept giving me errors because it was inserting hidden items from the wysiwyg editor. I ended up having to make sure everything was on one line which gets real long Anyway, I only did the US and the states of Washington, Oregon, California, Idaho, Montana, and Nevada.
To test this use the world-map sample, and:
1. from the US Map Sample copy the us_map.gif image into the folder with the World map sample images.
2. in the world_map_data.js file copy the USA submenu and paste it to the file again and then rename it USA1.
3. in the original USA submenu, change this
Code:
aI("align=center;image=usa.gif;imagealign=center;itemheight=50;type=header;");
to this: Code:
aI("align=center;image=usa.gif;imagealign=center;itemheight=50;showmenu=USA1;");
3. paste this as the only aI string in the new USA1
Code:
aI("text=<table width=574 cellpadding=0 cellspacing=0 border=0 height=178><tr><td style='background-image:url(us_map.gif)'><IMG SRC='us_map.gif' WIDTH='574' HEIGHT='390' BORDER='0' ISMAP USEMAP='#usmap'><MAP NAME='usmap'><AREA SHAPE='POLY' HREF='page1.htm' TARGET='new' COORDS='94,11, 207,10, 207,63, 139,63, 139,67, 130,65, 123,66, 113,54, 109,52, 111,47, 113,43, 94,24, 94,11'><AREA SHAPE='POLY' HREF='page2.htm' TARGET='new' COORDS='83,11, 82,50, 89,59, 82,69, 83,100, 138,100, 138,70, 135,67, 120,70, 111,55, 104,54, 107,43, 91,25, 91,11, 83,11'><AREA SHAPE='POLY' HREF='page3.htm' TARGET='new' COORDS='55,102, 111,102, 110,178, 104,174, 106,186, 54,136, 55,102'><AREA SHAPE='POLY' HREF='page4.htm' TARGET='new' COORDS='10,103, 51,103, 51,138, 105,190, 104,221, 79,222, 75,211, 47,196, 45,186, 31,171, 28,162, 30,156, 22,152, 8,120, 10,103'><AREA SHAPE='POLY' HREF='page5.htm' TARGET='new' COORDS='13,48, 8,89, 11,100, 81,100, 81,73, 78,69, 86,56, 79,49, 27,55, 13,48'><AREA SHAPE='POLY' HREF='page6.htm' TARGET='new' COORDS='27,12, 28,33, 24,34, 20,29, 24,27, 7,21, 14,45, 25,49, 27,53, 81,48, 81,11, 27,12'></MAP></td></tr></table>;type=html;");
NOTE: I don't know if you need the table, I didn't want to make another image map without a table to test it, since the coordinates would change if i got rid of the table.
Make sure the code doesn't wrap. Now when you open the world map sample page and mouseover the USA you should get the original submenu with the information and US Flag and when you mouseover the flag or lower you should get a submenu with the image map in it.
For testing I put pages into the href so I could click the link and see if they worked.
That will give you the regular world map, which when you mouseover a country, the USA in this case, you get the regular world map sample dropdown with the country info, and when you mouseover that dropdown it will open another submenu with a map of the USA on which are links for the various states [in this case the ones I mentioned.
_______________________________________
One more note
As I was working on this I had one other thought about this which would let you go down one more level. It's kind of involved, not difficult just involved. The premise is this:, assume that the 'main' map page is of the world:
1. that page would have a Milonic menu for the site but the imagemap would not use the Milonic menu [not on this page], instead the page would have the image map and use javascript onmouseover event to open pre-positioned, pre-styled pages with new image maps.
2. the newly opened pages would use the image map Milonic, so let's say you mouseover the USA on your world map page, that would open a window Xpx wide Xpx high with whatever features you put in and with an image map of the USA, that map would use the Milonic menu so when you did a mouseover of California, let's say, you would have the info about CA, capital, population and so on, and when you moused over that it would open a submenu that was an image map of the state with mapped links on the various cities which you want as links
Hope all that made sense and helps.
Ruth