How do I make an Image Map part of Menu

Taken From The Forum:
Forum Topic:
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()} 
}

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

Industrial Strength JavaScript and DHTML Menus

How do I make an Image Map part of Menu