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

[antix10_kos]

by wrapping it the div, do u mean just put the divs for the menus somewhere in the div for the site?? also, where should I put it the menu divs in the big div?? also, what IDs do I assign to my menu divs? is it just numbers, like 1,2,3 etc or is it something more specific.....

gah, I'm so lost, I know the basics of divs but this is a bit advanced. I think I might need a walk-through or something....

[largosama]

- As you know, adding divs moves everything around which is very annoying. To simplify things, create another div and place the popup menus inside of that and close it.
- Div id can be anything, it's just the id that the script refers to when it closes and opens the div.
- An example of a menu on the image map would be:
<......href="#" onClick="toggle('DIVID')">
where the ...... is the coordinates

[antix10_kos]

I need a full example to show me how to set this thing up. everytime I try, nothing happens and it's very frustrating. I've tried searching the net, to see if anyone had posted how to use this code....THIS is what I came up with. I tried follwing everything best i could, but my code is messed up...

<!-- begin code provided by createblog.com --><br /><img src="http://img184.exs.cx/img184/6350/greenwithenvy17iu.jpg" width="1024" height="768" border="0" alt="" usemap="#greenwithenvy2_Map"><br /><map name="greenwithenvy2_Map"><br /><area shape="rect" alt="" coords="820,196,931,228" href="http://www.xanga.com"><br /><area shape="rect" alt="" coords="697,198,802,227" href="http://www.xanga.com/lougout"><br /><area shape="rect" alt="" coords="519,199,681,227" href="http://www.me.com"onMouseover="toggle('three')"><br /><area shape="rect" alt="" coords="838,158,1011,185" href="http://www.xanga.com/Private/tracking.aspx"><br /><area shape="rect" alt="" coords="695,157,823,186" href="http://www.xme.com"onMouseover="toggle('two')"><br /><area shape="rect" alt="" coords="529,157,673,187" href="http://www.qme.com"onMouseover="toggle('one')"><br /><area shape="rect" alt="" coords="412,156,511,185" href="http://www.xanga.com/claf"><br /></map><br /><style type="text/css"><br /><!--<br />.ddn  {color:#000033; background-color:#ffffff; layer-background-color:#cccccc;<br />        position:static; top:400px; left:600px; width:180px; height:140px;<br />        z-index:99;  visibility:hidden;}<br />--><br /><div ID="one" class="ddn"><br /> <a href="http://www.xanga.com/home.aspx?user=whoever-ur-subbed-to1"></a><br /> <a href="http://www.xanga.com/home.aspx?user=whoever-ur-subbed-to2"></a><br /> <a href="http://www.xanga.com/home.aspx?user=whoever-ur-subbed-to3"></a>  <br /></div><br /><div ID="two" class="ddn"><br /> <a href="http://www.xanga.com/groups/group.aspx?id=youridnumber">blogringname</a><br /></div><br /><div ID="three" class="ddn"><br /> <a href="aim:goim?screenname=YOUR SN HERE">IM me</a><br /> <a href="http://www.xanga.com/send.aspx?user=yourusername">email me</a><br /></div><br /></style><br /><script><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 /><br /><!-- end code provided by createblog.com --><br /><!-- end code provided by createblog.com -->

that's what I ended up with. plz help, I don't think that any of the skins here have ever used it, I tried searching the skins section to see if anyone has ever used this code so I could get an idea of what it should look like....I am lost.