PDA

View Full Version : Anylink drop down menu for image map



paranoidandroid
02-19-2009, 05:30 PM
ANYLINK DROP DOWN MENU FOR IMAGE MAP
http://www.dynamicdrive.com/forums/showthread.php?t=9812

I'm trying to have a drop down menu from an area/image map link. The script does generate the right menu but the menu does not display right below the map, where I would rather it go. I understand this script is rather old but I tried all the different version/updates of this script and nothing fixed the problem.

Below is the script in question:



#dropmenudiv{
position:absolute;z-index:999;
border:1px solid black;
border-bottom-width: 0;
font:normal 13px Times New Roman;
line-height:17px;
z-index:100;
}

#dropmenudiv a, span{
color: white;
width: 149;
display: block;
text-indent: 2px;
border-bottom: 1px solid white;
padding: 1px 0;
text-decoration: none;
font-weight: none;
width:100%
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #3399FF;
color: white;
}


</STYLE>

<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
* Modified in http://www.dynamicdrive.com/forums by jscheuer1
* To work with image maps (rect shapes only)
***********************************************/

var menu1=new Array()
menu1[0]='<a href="companyprofile.php" target="mainframe">Company

Profile</a><br>'
menu1[1]='<a href="quality.php" target="mainframe">Quality

Attainment</a><br>'
menu1[2]='<a href="organisation.php" target="mainframe">Organisation

Chart</a><br>'
menu1[3]='<a href="management.php" target="mainframe">Management</a><br>'
menu1[4]='<a href="milestone.php" target="mainframe">Milestones</a><br>'

var menu2=new Array()
menu2[0]='<a href="defence.php" target="mainframe">Defence</a><br>'
menu2[1]='<a href="maritime.php" target="mainframe">Maritime</a><br>'
menu2[2]='<a href="homelandsec.php" target="mainframe">Homeland

Security</a><br>'
menu2[3]='<a href="centre.php" target="mainframe">Centre</a><br>'

var menu3=new Array()
menu3[0]='<a href="workwithus.php" target="mainframe">Working With

Us</a><br>'
menu3[1]='<a href="careeropp.php" target="mainframe">Career

Opportunities</a><br>'

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

/////No further editing needed

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:'+menubgcol

or+'" onMouseover="clearhidemenu()"

onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
if (what.parentNode&&typeof

what.parentNode.tagName!=='undefined'&&what.parentNode.tagName.toLowerCas

e()=='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>


</head>

<BODY onLoad="self.focus()">
<div id="pict" style="top:0px;bottom:0px;left:200px;position:absolute;">
<img name="STETWebMainBG1.jpg" src="STET Web Main BG.jpg" width="1000"

height="889" border="0" id="STETWebMainBG"" usemap="#m_header.jpg" alt=""

/></div>
<div id="pict" style="top:0px;left:200px;position:absolute;">
<img name="STETWebMainBG" src="header.jpg" width="1000" height="271"

border="0" id="STETWebMainBG.jpg" usemap="#m_header.jpg" alt="" />

<map name="m_header.jpg" id="m_STET20Web20Main20BG.jpg">
<area shape="rect" coords="928,816,977,839" href="sitemap.php"

title="Site Map" alt="Site Map" />
<area shape="circle" coords="71,827, 19" href="intranet.php" title="Log

In To Intranet" alt="Log In To Intranet" />
<area shape="rect" coords="96,814,169,840" href="intranet.php" title="Log

In To Intranet" alt="Log In To Intranet" />
<area shape="rect" coords="775,234,855,263" href="contact.php"

title="Contact Us" alt="Contact Us" target="mainframe" />
<area shape="rect" coords="651,234,715,263" title="Join Us!" alt="Join

Us!" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this,

event, menu3, '150px')" onMouseout="delayhidemenu()" target="main" />
<area shape="rect" coords="426,231,589,262" href="intlstudents.php"

title="International Students Enrolment" alt="International Students

Enrolment" target="mainframe" />
<area shape="rect" coords="245,232,361,264" title="Training Facilities"

alt="Training Facilities" onClick="return clickreturnvalue()"

onMouseover="dropdownmenu(this, event, menu2, '150px')"

onMouseout="delayhidemenu()" target="main" />
<area shape="rect" coords="112,232,186,265" title="About Us" alt="About

Us" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this,

event, menu1, '150px')" onMouseout="delayhidemenu()" target="main" />

</map>
</div>


I also tried looking for the updated version of this script in the main script library but I can't locate it. Can someone please refer me to it?

Please help as it is rather urgent, and thanks in advance! =)

ddadmin
02-20-2009, 05:58 AM
Well the new version of the menu can be found here (http://dynamicdrive.com/dynamicindex1/dropmenuindex.htm). However, officially, both scripts weren't built to support image maps by default. There are a few threads on how to get the former (older version) to work with image maps, though it might take some digging around to find the thread that fits your situation exactly. In other words, it's not a formally supported feature.