Results 1 to 2 of 2

Thread: Anylink drop down menu for image map

  1. #1
    Join Date
    Feb 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Anylink drop down menu for image map

    ANYLINK DROP DOWN MENU FOR IMAGE MAP
    http://www.dynamicdrive.com/forums/s...ead.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:

    Code:
    #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! =)

  2. #2
    Join Date
    Aug 2004
    Posts
    9,903
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    Well the new version of the menu can be found here. 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.
    DD Admin

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •