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:21
How do I make an Image Map part of Menu
Poster: alanrshultz
Dated: Wednesday December 14 2005 - 22:22:15 GMT
I would like to use for example the US Map sample as part of a menu,
Go to my web site http://www.trueblueclothing.com open the menu system and navigate to contact us -> phone us -> territory map ....
I then want the us territory map from within the menu system to use coordinates to open a web page based on the where you click on the map
Poster: Ruth
Dated: Thursday December 15 2005 - 0:22:23 GMT
Hi,
You're within a menu so there's really no way to set up a map with 'page' coordinates, you're not on the page. However, you can set up something that looks like an image map. As an example, the following uses 4 images, a table with two rows and two columns an image in each, with href links for each image to open a page in a new window and this is all inside an aI string:
Code:
aI("text=<table cellpadding=0 cellspacing=0 border=0><tr><td><a href='page1.htm' target='new'><img src='image1.jpg' width='165' height='165' border='0'></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 simulation in a Milonic DHTML submenu;type=html;");
Another idea would possibly to have the showmenu=Teritory open a div on click which has a Milonic image map in it, though I have not tested this. I'll have to figure out how to open a div from a click on the menu item. Sorry, I"m not real advanced on making divs that start hidden and get made 'visible' on a click. If I can figure that out I'll post back.
Ruth
Poster: Ruth
Dated: Thursday December 15 2005 - 7:19:35 GMT
Hi Alan,
I figured out a way to do what you want, though it isn't a submenu.
In your menu data file, add this function to the top
Code:
var newwindow;
function poptastic(url)
{
newwindow=window.open(url,'name','height=342,width=591,top=100,left=120');
if (window.focus) {newwindow.focus()}
}
function poptastic(url)
{
newwindow=window.open(url,'name','height=342,width=591,top=100,left=120');
if (window.focus) {newwindow.focus()}
}
You can add features, like scroll bar, resizable etc, but I figured since it was an image map it didn't need all that.
In the PHONEwho submenu make this the territory item.
Code:
aI("text=Territory Map;openonclick=1;url=javascript:poptastic('map.htm');");
where map.htm will be whatever you name the page.Then in your menu_data.js file for the us map download menu, just set up the submenus that show on mouseover the way you want. In effect you are opening a little pop up window from the click in the data on your main page, and then using a different data file for the page that loads so you can use an image map and open submenus.
LINK REMOVED. I didn't recreate your main page because I can't get the flash, so you'll have to test how this works with the functioning flash.
LINK REMOVED
Let me know when you get a chance to check it out so I can remove the files.
Hope this helps. I only put in the two submenus for the names and numbers you had on the map you show on your site, but the map_data.js file has all the states' submenus, they just aren't called and I thought using an asterik and a circle around that instead of the whole state worked better since there wasn't an overlap when moving from one state to the next.
Ruth