1) Script Title: Anylink Drop down menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pmenuindex.htm

3) Describe problem:

I am creating drop down menus using an image map. I create the image map by going into Microsoft visio and exporting the project as a website. From there I grab the img.html and copy and paste the image map into my code. Here is the javascript:

[CODE]
<script type="text/javascript">
/***********************************************
* AnyLink JS Drop Down Menu v2.0- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm for full source code
***********************************************/

var menuwidth='150px' //default menu width
var menubgcolor='#99ccff' //menu bgcolor
var disappeardelay=200 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?



var ie4=document.all
var ns6=document.getElementById&&!document.all
var mapflag=0

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
if (what.parentNode&&typeof what.parentNode.tagName!=='undefined'&&what.parentNode.tagName.toLowerCase()=='map'){
mapflag=1;
var ocoords=what.coords.split(',')
var totaloffset=(offsettype=="left")? ocoords[0]*1 : ocoords[3]*1;
var mapIm=what.parentNode.parentNode.getElementsByTagName('img')
for (var i_tem = 0; i_tem < mapIm.length; i_tem++)
if (mapIm[i_tem].getAttribute('usemap', 0)&&mapIm[i_tem].getAttribute('usemap', 0).replace(/^.*(#.*)/g,'$1')=='#'+what.parentNode.name)
var parentEl=mapIm[i_tem];
}
else {
mapflag=0;
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
}
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")-1+"px"

var oHeight=mapflag? 0 : obj.offsetHeight+46
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+oHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>
[CODE]

Then here is the image map:

[CODE]
<body>
<center>
<table>
<tr>
<td>
<IMG id="ConvertedImage" SRC="jpg_1.jpg" ALT="Page-1" name=RasterImage BORDER="0" USEMAP="#visImageMap">
<MAP NAME="visImageMap">
<AREA href="#" onClick="return dropdownmenu(this, event, menu3, '200px')" onMouseout="delayhidemenu()" shape="POLYGON" tabindex="1" ALT="" origTitle="" TITLE="" target="_top" COORDS="405,202,406,202,406,202,406,159,406,159,387,148,356,165,356,165,356,165,356,165,356,165,356,209,356,209,357,210,357,210,358,211,358,211,359,211,359,212, 360,212,361,213,361,213,362,214,362,214,363,214,364,215,364,215,365,215,365,216,366,216,367,216,367,217,368,217,369,217,369,217,370,218,371,218,371,218,372,218, 373,218,374,219,374,219,375,219,375,219,405,202" />
<AREA href="#" onClick="return dropdownmenu(this, event, menu7, '200px')" onMouseout="delayhidemenu()" shape="POLYGON" tabindex="1" ALT="" origTitle="" TITLE="" target="_top" COORDS="105,527,106,526,106,526,106,483,106,483,87,473,56,490,56,490,56,490,56,490,56,490,56,534,56,534,57,534,57,535,58,535,58,536,59,536,60,537,60,537,61,538, 61,538,62,538,62,539,63,539,64,539,64,540,65,540,66,541,66,541,67,541,68,541,68,542,69,542,70,542,70,542,71,543,72,543,72,543,73,543,74,543,74,543,75,544,75,544 ,105,527" />
<AREA href="#" onClick="return dropdownmenu(this, event, menu8, '200px')" onMouseout="delayhidemenu()" shape="POLYGON" tabindex="1" ALT="" origTitle="" TITLE="" COORDS="306,527,307,526,307,526,307,483,307,483,288,473,258,490,258,490,258,490,257,490,257,490,258,534,258,534,258,534,258,535,259,535,260,536,260,536,261,537, 261,537,262,538,262,538,263,538,264,539,264,539,265,539,265,540,266,540,267,541,267,541,268,541,269,541,269,542,270,542,271,542,271,542,272,543,273,543,273,543, 274,543,275,543,276,543,276,544,276,544,306,527" />
<AREA href="#" onClick="return dropdownmenu(this, event, menu5, '200px')" onMouseout="delayhidemenu()" shape="POLYGON" tabindex="1" ALT="" origTitle="" TITLE="" target="_top" COORDS="701,287,702,286,702,286,702,243,702,243,683,233,653,250,653,250,653,250,653,250,653,250,653,294,653,294,653,294,654,295,654,295,655,296,655,296,656,297, 656,297,657,298,657,298,658,298,659,299,659,299,660,299,660,300,661,300,662,301,662,301,663,301,664,301,664,302,665,302,666,302,666,302,667,303,668,303,668,303, 669,303,670,303,671,303,671,304,671,304,701,287" />
<AREA href="#" onClick="return dropdownmenu(this, event, menu6, '200px')" onMouseout="delayhidemenu()" shape="POLYGON" tabindex="1" ALT="" origTitle="" TITLE="" target="_top" COORDS="472,386,473,385,473,385,473,342,473,342,454,332,423,349,423,349,423,349,423,349,423,349,423,393,423,393,424,393,424,394,425,394,425,395,426,395,426,395, 427,396,428,396,428,397,429,397,429,398,430,398,431,398,431,399,432,399,432,399,433,400,434,400,434,400,435,400,436,401,436,401,437,401,438,401,438,402,439,402, 440,402,441,402,441,402,442,402,442,402,472,386" />
<AREA href="#" onClick="return dropdownmenu(this, event, menu4, '200px')" onMouseout="delayhidemenu()" shape="POLYGON" tabindex="1" ALT="" origTitle="" TITLE="" target="_top" COORDS="563,202,564,202,564,202,564,159,564,159,545,148,515,165,515,165,515,165,515,165,515,165,515,209,515,209,515,210,516,210,517,211,517,211,518,211,518,212, 519,212,519,213,520,213,520,214,521,214,522,214,522,215,523,215,523,215,524,216,525,216,525,216,526,217,527,217,527,217,528,217,529,218,529,218,530,218,531,218, 532,218,532,219,533,219,534,219,534,219,563,202" />
<AREA href="#" onClick="return dropdownmenu(this, event, menu1, '200px')" onMouseout="delayhidemenu()" shape="POLYGON" tabindex="1" ALT="" origTitle="" TITLE="" target="_top" COORDS="147,93,148,93,148,86,108,64,99,69,99,76,100,76,100,77,139,99,147,94,147,93" />
<AREA href="#" onClick="return dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu()" shape="POLYGON" tabindex="1" ALT="" origTitle="" TITLE="" target="_top" COORDS="292,103,293,103,293,103,293,60,293,60,274,49,243,66,243,66,243,66,243,66,243,66,243,110,243,110,244,111,244,111,245,112,245,112,246,113,247,113,247,114, 248,114,248,114,249,115,249,115,250,116,251,116,251,116,252,117,253,117,253,117,254,118,254,118,255,118,256,118,257,119,257,119,258,119,259,119,259,119,260,120, 261,120,261,120,262,120,262,120,292,103" />
</MAP>
</td>
</tr>
</table>
</center>
[CODE]

When I run the .html file in a browser everything works okay except for the two maps at the bottom of the image. In FF when I click on the hotspot of the image it will only show half of the menu items but it will be in the right spot. In IE it will show all of the menu items but it will be an inch above the hotspot.

Hokie19