dropdown menus, can't figure it out. Options

[antix10_kos]

Questions that I have:

1) Can I use the code below with an image map?
2) Where do I put this code? I know the CSS part goes in "custom header" but other parts I don't where they would go.
3) Is there a code especially for drop-down menus on an imagemap? Where do u suggest that I look for a code if there isn't one??
4) How would I position this div so that it would line up with my image map links?

EXAMPLE SITE *not a xanga*

<!-- begin code provided by createblog.com --><br /><style type="text/css"><br /><br />#dropmenudiv{<br />position:absolute;<br />border:1px solid black;<br />font:normal 12px Verdana;<br />line-height:18px;<br />z-index:100;<br />}<br /><br />#dropmenudiv a{<br />width: 100%;<br />display: block;<br />text-indent: 3px;<br />}<br /><br />#dropmenudiv a:hover{ /*hover background color*/<br />background-color: yellow;<br />}<br /><br /></style><br /><br /><br /><script type="text/javascript"><br /><br />/***********************************************<br />* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)<br />* This notice MUST stay intact for legal use<br />* Visit http://www.dynamicdrive.com/ for full source code<br />***********************************************/<br />var menu1=new Array()<br />menu1[0]='<a href="http://www.xanga.com/home.aspx?user=whoever-ur-subbed-to">sub1</a>'<br />menu1[1]='<a href="http://www.xanga.com/home.aspx?user=whoever-ur-subbed-to">sub2</a>'<br />menu1[2]='<a href="http://www.xanga.com/home.aspx?user=whoever-ur-subbed-to">sub3</a>'<br />menu1[3]='<a href="http://www.xanga.com/home.aspx?user=whoever-ur-subbed-to">sub4</a>'<br /><br />var menu2=new Array()<br />menu2[0]='<a href="http://www.xanga.com/groups/group.aspx?id=youridnumber">group1</a>'<br />menu2[1]='<a href="http://www.xanga.com/groups/group.aspx?id=youridnumber">group2</a>'<br />menu2[2]='<a href="http://www.xanga.com/groups/group.aspx?id=youridnumber">group3</a>'<br /><br />var menu3=new Array()<br />menu3[0]='<a href="aim:goim?screenname=YOUR SN HERE">IM me</a>'<br />menu3[1]='<a href="http://www.xanga.com/send.aspx?user=yourusername">Email me</a>'<br /><br />  <br />var menuwidth='165px' //default menu width<br />var menubgcolor='lightyellow'  //menu bgcolor<br />var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)<br />var hidemenu_onclick="yes" //hide menu when user clicks within menu?<br /><br />/////No further editting needed<br /><br />var ie4=document.all<br />var ns6=document.getElementById&&!document.all<br /><br />if (ie4||ns6)<br />document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')<br /><br />function getposOffset(what, offsettype){<br />var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;<br />var parentEl=what.offsetParent;<br />while (parentEl!=null){<br />totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;<br />parentEl=parentEl.offsetParent;<br />}<br />return totaloffset;<br />}<br /><br /><br />function showhide(obj, e, visible, hidden, menuwidth){<br />if (ie4||ns6)<br />dropmenuobj.style.left=dropmenuobj.style.top=-500<br />if (menuwidth!=""){<br />dropmenuobj.widthobj=dropmenuobj.style<br />dropmenuobj.widthobj.width=menuwidth<br />}<br />if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")<br />obj.visibility=visible<br />else if (e.type=="click")<br />obj.visibility=hidden<br />}<br /><br />function iecompattest(){<br />return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body<br />}<br /><br />function clearbrowseredge(obj, whichedge){<br />var edgeoffset=0<br />if (whichedge=="rightedge"){<br />var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15<br />dropmenuobj.contentmeasure=dropmenuobj.offsetWidth<br />if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)<br />edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth<br />}<br />else{<br />var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18<br />dropmenuobj.contentmeasure=dropmenuobj.offsetHeight<br />if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)<br />edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight<br />}<br />return edgeoffset<br />}<br /><br />function populatemenu(what){<br />if (ie4||ns6)<br />dropmenuobj.innerHTML=what.join("")<br />}<br /><br /><br />function dropdownmenu(obj, e, menucontents, menuwidth){<br />if (window.event) event.cancelBubble=true<br />else if (e.stopPropagation) e.stopPropagation()<br />clearhidemenu()<br />dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv<br />populatemenu(menucontents)<br /><br />if (ie4||ns6){<br />showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)<br />dropmenuobj.x=getposOffset(obj, "left")<br />dropmenuobj.y=getposOffset(obj, "top")<br />dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"<br />dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"<br />}<br /><br />return clickreturnvalue()<br />}<br /><br />function clickreturnvalue(){<br />if (ie4||ns6) return false<br />else return true<br />}<br /><br />function contains_ns6(a, b) {<br />while (b.parentNode)<br />if ((b = b.parentNode) == a)<br />return true;<br />return false;<br />}<br /><br />function dynamichide(e){<br />if (ie4&&!dropmenuobj.contains(e.toElement))<br />delayhidemenu()<br />else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))<br />delayhidemenu()<br />}<br /><br />function hidemenu(e){<br />if (typeof dropmenuobj!="undefined"){<br />if (ie4||ns6)<br />dropmenuobj.style.visibility="hidden"<br />}<br />}<br /><br />function delayhidemenu(){<br />if (ie4||ns6)<br />delayhide=setTimeout("hidemenu()",disappeardelay)<br />}<br /><br />function clearhidemenu(){<br />if (typeof delayhide!="undefined")<br />clearTimeout(delayhide)<br />}<br /><br />if (hidemenu_onclick=="yes")<br />document.onclick=hidemenu<br /><br /></script><br /><!-- end code provided by createblog.com -->

[largosama]

Personally, I think that positioning Div's along with this script:

<!-- begin code provided by createblog.com --><br />function toggleBox(szDivID, iState) // 1 visible, 0 hidden<br />{<br />    if(document.layers)    //NN4+<br />    {<br />       document.layers[szDivID].visibility = iState ? "show" : "hide";<br />    }<br />    else if(document.getElementById)   //gecko(NN6) + IE 5+<br />    {<br />        var obj = document.getElementById(szDivID);<br />        obj.style.visibility = iState ? "visible" : "hidden";<br />    }<br />    else if(document.all) // IE 4<br />    {<br />        document.all[szDivID].style.visibility = iState ? "visible" : "hidden";<br />    }<br />}<br /><br />//--></script><br /><!-- end code provided by createblog.com -->

will accomplish your purpose better than editing that script to fit xanga standards.

Wrap the divs you want for the menus in one large div close to the links on the image map, give them id's and apply a

CODE

onMouseover="toggle('ID')"

after the

href

in the image map