Image Map with Rollover and submenu

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:25

Image Map with Rollover and submenu

Poster: winbach
Dated: Monday December 17 2007 - 6:47:23 GMT

Greetings. I have basically put this together and it does not work in IE. It does work in Safari though. Not sure about the other browsers.

My goal is to have a image map with a rollover and a submenu showing. I would also like to have the submenu show until the next click or another part of the page is clicked but I tried the keepalive parameter but it did not work.

I am totally lost. Any help would be appreciated.

HTML file is:
http://www.winbach.com/PD/representative.html

Map on page is image I would like to image map.

Here is my menudata.js text

fixMozillaZIndex=true; //Fixes Z-Index problem with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=0;
_subOffsetLeft=-0;

with(MapSample=new mm_style()){
bordercolor="#4B4844";
borderstyle="solid";
borderwidth=1;
fontfamily="Arial, Helvetica, Verdana, Tahoma, sans-serif";
fontsize="10px";
fontstyle="normal";
fontweight="normal";
headerbgcolor="#ffffff";
headercolor="navy";
offbgcolor="#E0DAC7";
offcolor="#000000";
onbgcolor="#E0DAC7";
oncolor="#000000";
padding=2;

}

with(milonic=new menuname("john")){
margin=3;
style=MapSample;
menuwidth=200;
top=400;
left=122;
aI("text=TERRITORY MANAGER;align=center;fontsize=10px;fontweight=bold;");
aI("text=John Young Sr.;align=center;fontsize=14px;fontweight=bold;");
aI("text=967 Bay St, San Francisco, CA, 94109;align=center;");
aI("text=Cell: 805-234-5530 Fax: 805-456-2156;align=center;");
aI("text=john __at__ packagedevices.com;url=john __at__ packagedevices.com;align=center;offcolor=#3333CC;");
}

drawMenus();

Thank you!!

Winbach

Re: Image Map with Rollover and submenu

Poster: John
Dated: Monday December 17 2007 - 13:58:33 GMT

First things first. You are running v5.751 of the menu code, 36 versions down-level. The current version is required for help here in the forum, now at v5.787. Load that up, and then come back if you continue to have problems.

Re: Image Map with Rollover and submenu

Poster: winbach
Dated: Monday December 17 2007 - 16:36:43 GMT

Greetings. Thanks. I have uploaded the latest version but am still having the same problems. SIGH!!

Re: Image Map with Rollover and submenu

Poster: Ruth
Dated: Monday December 17 2007 - 17:15:20 GMT

I may be missing something because I've not worked with the map samples, but don't you need coordinates? In both the milonic samples of the image maps there are coordinates listed or are they not necessary?

Code:

<area onMouseOver="popup('Washington',1)" onMouseOut="popdown()" shape="poly" coords="28,10,28,17,29,24,29,30,25,33,23,28,24,25,23,21,8,19,5,20,9,29,12,35,12,45,24,47,26,49,36,52,54,50,66,48,86,49,83,42,82,11" href="#">

Ruth

Re: Image Map with Rollover and submenu

Poster: winbach
Dated: Monday December 17 2007 - 18:49:39 GMT

Greetings. My coordinates are at the bottom of the page:

My entire code for the page is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Package Devices</title>

<link href="style.css" rel="stylesheet" type="text/css">
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">

</style>

<script type="text/javascript" src="milonic_src.js"></script>
<script type="text/javascript" src="mmenudom.js"></script>
<script type="text/javascript" src="menu_data.js"></script>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

</head>

<body onLoad="MM_preloadImages('images/map_mike.gif','images/map_john.gif','images/map_tom.gif','images/map_mikeb.gif')">
<table style="width:765px;" align="center">
<tr>
<td>
<table style="height:280px">
<tr>
<td height="75" style="height:75px"><img src="images/PDlogo.gif" width="396" height="80"></td>
</tr>
<tr>
<td height="220" style="height:208px"><div align="center">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','765','height','205','src','images/header_CS3','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/header_CS3' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="765" height="205">
<param name="movie" value="images/header_CS3.swf">
<param name="quality" value="high">
<embed src="images/header_CS3.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="765" height="205"></embed>
</object>
</noscript>
</div></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="height:540px" class="m_text">
<table >
<tr>
<td valign="top" style="width:219px; background:#CFC6AB"><table>
<tr>
<td style="height:96px; background:#E0DAC7"><table >
<tr>
<td style="width:25px;"></td>
<td style="width:175px;"><p align="center" class="pageTitles"><br>
Find A Representative</p></td>
<td style="width:19px;"></td>
</tr>
</table></td>
</tr>
<tr>
<td style="height:200px; background:#CFC6AB"> </td>
</tr>
</table></td>
<td style="width:1px; background:#CFC6AB"></td>
<td height ="100%" style="width:545px;" class="m_text">
<table height="60" >
<tr>
<td style="background:#EDE9DE"><table >
<tr>
<td><p> </p>
<table height="550" border="0" class="m_text">

<tr>
<td style="width:30px"><div align="center"></div></td>
<td align="center" valign="top" class="linecardtxt" style="width:450px"><div align="center"><span class="linecardtxt" style="width:450px"><strong><img src="images/map.gif" width="400" height="466" border="0" usemap="#reps" id="Image1"><br>
</strong></span></div></td>
<td style="width:30px"> </td>
</tr>
</table>

</td>
</tr>
</table></td>
</tr>

</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style=" background:url(images/bg-bot.gif) top repeat-x"><table width="358" height="24" border="0" align="center">

<tr>
<td height="20" valign="top" class="c_text"><div align="center">
<p><br>
Copyright 2007. All Rights Reserved.<br>
</p>
</div></td>
</tr>

</table>
</td>
</tr>
</table>

<map name="reps">
<area shape="poly" coords="57,32,28,157,32,164,61,166,76,209,95,245,111,261,52,263,47,258,47,251,39,240,39,229,30,210,40,195,31,189,28,171,24,153,20,137,13,124,18,92,9,65,24,46,33,14,59,22" href="#" alt="john" onmouseover="popup('john',1);MM_swapImage('Image1','','images/map_john.gif',1)" onmouseout="popdown();MM_swapImgRestore();" shape="rect">

</map></body>
</html>

Suggestions??? I am trying to do a rollover and a submenu when the mouse goes over the image map.

Thanks
L

Re: Image Map with Rollover and submenu

Poster: Ruth
Dated: Tuesday December 18 2007 - 0:00:47 GMT

Hi,

I'm going to have to post to Milonic and ask John. It looks like you're trying to use the image map which calls a submenu, but that you are trying to also include a mouseover popup for the images. I don't know about image maps and I don't use dreamweaver so I'm 0 for 2

Ultimately, I don't know if you can combine the image map which is actually a main menu calling submenus when you mouseover a particular coordinate and also the swap image. I've only seen that swap image used with the popup. I have this example from someone who uses Milonic and the popup swap image

http://www.wagnersteering.ca/about.htm

I will post to John and to Milonic to get some info and see if and how you can do what you're doing.

Ruth

Re: Image Map with Rollover and submenu

Poster: winbach
Dated: Tuesday December 18 2007 - 20:54:24 GMT

Greetings. I got this to work. You can see how it is working at

http://www.winbach.com/PD/representative.html

Thanks for your time.

Lisa

Re: Image Map with Rollover and submenu

Poster: Ruth
Dated: Wednesday December 19 2007 - 0:47:29 GMT

Hi,

Thank you for posting the working sample. It is appreciated. I haven't looked at it fully yet, but I thought you might like to have info on the submenu positions. You can position them where you want using the popup functionality. Here is the information http://www.milonic.com/menu_methods.php It is down toward the bottom. There is also a new property added for positioning the pop, added in version 5.872 The explanation is on the menu version information page down at that version number

http://www.milonic.com/menuvinfo.php

The new property allows you to set the position on the page based on left and top 0 starting position, the old method uses a top and left offset which positions it from the menu top and left 0 starting point, not from the top left of the page. Hope that made sense.

Ruth