PDA

View Full Version : AnyLink Drop Down Menu problems



walker2287
11-23-2007, 06:42 PM
i am using the AnyLink Drop Down Menu to create drop down menus off my image map. i have a horizontal bar jpeg as my navbar and am using an image map for the links.
the problem is that the drop down menus appear to the far left and not under the link like i want.
thanks,
Jeff

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sigma Alpha Epsilon Home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1 Tn Eta
var menu1=new Array()
menu1[0]='<a href="index.htm">Home</a>'
menu1[1]='<a href="accomplishments.htm">Accomplishments</a>'
menu1[2]='<a href="house">house</a>'
menu1[3]='<a href="photo.htm">Pictures</a>'

//Contents for menu 2, Nationals
var menu2=new Array()
menu2[0]='<a href="http://sae.net/">Nationsals Nome</a>'
menu2[1]='<a href="http://www.truegentlemaninitiative.net/">TGI Initiative</a>'
menu2[2]='<a href="https://incircle.sae.net/">Members Only</a>'
//Contents for menu 3, Memebers
var menu3=new Array()
menu3[0]='<a href="members.htm">Memebers</a>'
menu3[1]='<a href="officers.htm">Officers</a>'
menu3[2]='<a href="pledges.htm">Pledges</a>'
//Contents for menu 4, events
var menu4=new Array()
menu4[0]='<a href="events.htm">Events Home</a>'
menu4[1]='<a href="fundraiser.htm">Fundraising</a>'
menu4[2]='<a href="community.htm">Community Services</a>'
//Contents for menu 5, Rush
var menu5=new Array()
menu5[0]='<a href="rush.htm">Rush SAE</a>'
menu5[1]='<a href="http://www.uu.edu/studentservices/organizations/ifc.cfm">Why go greek</a>'
menu5[2]='<a href="http://www.uu.edu/studentservices/organizations/greek.cfm">Union Greek</a>'
//Contents for menu6, Alumni
var menu6=new Array()
menu6[0]='<a href="alumni.htm">Information</a>'
menu6[1]='<a href="mailList.htm">Mailing List</a>'

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

/////No further editting needed

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

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){
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="-500px"
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")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"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>
</head>

<body>
<div id="header">
<img src="header.jpg" alt="Sigma Alpha Epsilon" border="0" usemap="#Map2" />
<map name="Map2" id="Map2"><area shape="circle" coords="86,132,70" href="index.htm" alt="Coat" />
</map>
</div>
<div id= "NavBar">
<img src="navbar.jpg" alt="NavBar" border="0" usemap="#Map" />
<map name="Map" id="Map">


<area shape="rect" coords="180,4,271,51" href="index.htm" alt="Tn Eta" clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '140px')" onMouseout="delayhidemenu()" >

<area shape="rect" coords="271,2,361,48" href="nationals.htm" alt="Nationals" clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '160px')" onMouseout="delayhidemenu()" >
<area shape="rect" coords="364,3,457,47" href="members.htm" alt="Members" clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '120px')" onMouseout="delayhidemenu()" >
<area shape="rect" coords="456,1,547,46" href="events.htm" alt="Events"clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '120px')" onMouseout="delayhidemenu()" >
<area shape="rect" coords="546,3,640,54" href="rush.htm" alt="Rush" clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu5, '120px')" onMouseout="delayhidemenu()" >
<area shape="rect" coords="640,4,730,53" href="alumni.htm" alt="Alumni" clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu6, '120px')" onMouseout="delayhidemenu()" >
<area shape="rect" coords="17,-9,152,41" href="index.htm" alt="of" />
</map></div>
<div id= "coatBottom">
<img src="bumb.jpg" alt="" width="161" height="50" border="0" usemap="#Map3" />
<map name="Map3" id="Map3"><area shape="circle" coords="86,-17,60" href="index.htm" alt="Arms" />
</map>
</div>
<div id="sideBar">
<p> hey </p>
</div>
<div id="main">
<div id="rightColumn">
<p> hey </p>
</div>
<p> The Tennessee Eta chapter was founded on July 4, 1857, marking the fifth established chapter of Sigma Alpha Epsilon. Being the oldest existing fraternity on Union University's campus, TN Eta is rich with traditon dating back to its earliest years. Its members are involved on campus with leadership positons in Residence Advisors, LIFE groups, Postal Service, Student Government, and Global Opportunity trips. </p>
</div>
</body>
</html>


i can post css and image files if needed,
thanks again,
Jeff

jscheuer1
11-23-2007, 09:06 PM
I think that you find that this, or at least some scripts with positioning dynamics work OK with image map in some browsers, but not in others. If you have an idea of what is involved, the fact that the image map isn't always treated like an ordinary element, coupled with the fact that some scripts require an a tag, not an area tag to key off of, I think you can quickly understand why. I wrote a script to help with these issues for most scripts:

http://www.dynamicdrive.com/forums/showthread.php?p=112581#post112581

See if it will solve this for you.