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@packagedevices.com;url=mailto:john@packagedevices.com;align=center;offcolor=#3333CC;");
}
drawMenus();
Thank you!!
Winbach
Image Map with Rollover and submenu
Re: Image Map with Rollover and submenu
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.
John
Re: Image Map with Rollover and submenu
Greetings. Thanks. I have uploaded the latest version but am still having the same problems. SIGH!!
Re: Image Map with Rollover and submenu
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?
Ruth
Code: Select all
<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="#">Re: Image Map with Rollover and submenu
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">
<!--
.style1 {color: #0033CC}
-->
</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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&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[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=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/shoc ... header_CS3' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shoc ... n=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 ... kwaveFlash" 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"><!-- #BeginLibraryItem "/Library/BottomNav.lbi" --><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>
<!-- #EndLibraryItem --></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
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">
<!--
.style1 {color: #0033CC}
-->
</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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&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[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=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/shoc ... header_CS3' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shoc ... n=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 ... kwaveFlash" 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"><!-- #BeginLibraryItem "/Library/BottomNav.lbi" --><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>
<!-- #EndLibraryItem --></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
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
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
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
http://www.winbach.com/PD/representative.html
Thanks for your time.
Lisa
Re: Image Map with Rollover and submenu
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://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://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
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://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://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