How do I make an Image Map part of Menu

[alanrshultz]

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

[Ruth]

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

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

[Ruth]

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

var newwindow; 
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: Select all

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