AnyLink Drop Down Menu with Image Maps

**Johnnymushio** · 11-26-2005, 02:27 AM

I am using the AnyLink Drop Down Menu on my site with no other JavaScripts, but I am using image map hot spots. Is this script not compatable with them? When the page loads, at the bottom of the browser (IE 6.0) it says the page laoded but with errors. When I click on the hotspot the page goes blank. Here is the entire code to the page. At the very bottom of the code is where I set up the link.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Japan Town</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="Home, Forum, J-Pop, Nihongo, Other, English Chat, Japanese Chat, Message Board, E-Pal's, Emoticons, News, Hiragana, Katakana, Kanji, Polls, J-Pop Charts, Slang, Wallpaper, General Chat, J-Pop Lyrics, J-Pop Videos, Words, Phrases, Staff, Terms of Use, Contact Us">
<meta name="description" content="This site is for J-Pop fans and/or people who want to study Japanese.">
<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 11px Times New Roamn;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: ;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: blue;
}

</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
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="Japan Town - General Chat.htm">General Chat</a>'
menu1[1]='<a href="Japan Town - English Chat.htm">English Chat</a>'
menu1[2]='<a href="Japan Town - Japanese Chat.htm">Japanese Chat</a>'
menu1[3]='<a href="Japan Town - Staff Chat.htm">Staff Chat</a>'
menu1[4]='<a href="Japan Town - Message Board.htm">Message Board</a>'
menu1[5]='<a href="Japan Town - Staff Message Board.htm">Staff Message Board</a>'
menu1[6]='<a href="Japan Town - E-Pal's.htm">E-Pal's</a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="Japan Town - J-Pop Charts">J-Pop Charts</a>'
menu2[1]='<a href="Japan Town - J-Pop Lyrics">J-Pop Lyrics</a>'
menu2[2]='<a href="Japan Town - J-Pop Videos">J-Pop Videos</a>'

var menu3=new Array()
menu3[0]='<a href="Japan Town - Hiragana.htm">Hiragana</a>'
menu3[1]='<a href="Japan Town - Kanji.htm">Kanji</a>'
menu3[2]='<a href="Japan Town - Katakana.htm">Katakana</a>'
menu3[3]='<a href="Japan Town - Phrases.htm">Phrases</a>'
menu3[4]='<a href="Japan Town - Slang.htm">Slang</a>'
menu3[5]='<a href="Japan Town - Words">Words</a>'

var menu4=new Array()
menu4[0]='<a href="Japan Town - Contact Us.htm">Contact Us</a>'
menu4[1]='<a href="Japan Town - Emoticons.htm">Emoticons</a>'
menu4[2]='<a href="Japan Town - News.htm">News</a>'
menu4[3]='<a href="Japan Town - Polls.htm">Polls</a>'
menu4[4]='<a href="Japan Town - Staff.htm">Staff</a>'
menu4[5]='<a href="Japan Town - Terms of Use.htm">Terms of Use</a>'
menu4[6]='<a href="Japan Town - Wallpaper.htm">Wallpaper</a>'

var menuwidth='150px' //default menu width
var menubgcolor='blue' //menu bgcolor
var disappeardelay=200 //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=-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")+"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>
<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="Header%20Background.gif" width="750" height="111" border="0" usemap="#Map"></td>
</tr>
</table>
<map name="Map">
<area shape="rect" coords="0,90,150,110" href="#">
<area shape="rect" coords="150,90,300,110" href="default2.htm" onClick="return dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu()">
<area shape="rect" coords="300,90,450,110" href="#">
<area shape="rect" coords="450,90,600,110" href="#">
<area shape="rect" coords="600,90,750,110" href="#">
<area shape="rect" coords="0,0,267,68" href="Index.htm">
</map>
</body>
</html>

**jscheuer1** · 11-26-2005, 06:08 AM

Working with scripts and image maps can be tricky and there may be some problems remaining once these basics are taken care of but, this will get things working, at least:

change this line:

Code:

menu1[6]='<a href="Japan Town - E-Pal's.htm">E-Pal's</a>'

to this:

Code:

menu1[6]='<a href="Japan Town - E-Pal\'s.htm">E-Pal\'s</a>'

(Single quotes used in a single quote delimited string must be escaped using the \)

That gets it basically working. But since you chose blue as the background for the menu and blue is the default color for links, a foreground color needs to be specified here:

Code:

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

**Johnnymushio** · 11-26-2005, 06:36 PM

Okay thanks that got everything working. Now, one more question... This is kind of hard to explain, but I'll try my best. Okay, I have 5 buttons in the navigation bar and each one is set up for the drop down menu. Whenever I put the cursor over the button the menu is displayed to the bottom left of the button, displaying the top right of the button and covering the bottom left. How would I make it so that when I put the cursor over the button is covers the entire button and goes downward? The buttons are each 150x19. If you don't understand what the heck I'm talking about I can send you a PrintScrn of it.

**jscheuer1** · 11-26-2005, 09:09 PM

Here is where, in the code, that the positions of the drop downs are finalized each time one is activated:

Code:

dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"

To get it farther to the right and higher, as you say you would like, you need to add to the 'style.left' and subtract from the 'style.top'. The exact amounts would best be arrived at through trial and error but a good start woud be (adjustments added in red):

Code:

dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+75+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight-10+"px"

**Johnnymushio** · 11-27-2005, 01:33 AM

Okay I got that to work perfectly too, thanks! Now ANOTHER question... Is it possible to turn of hover effects and links on certain cells and keep a border around the cell?

**jscheuer1** · 11-27-2005, 04:10 AM

I'm not sure what you mean by border or by cell. Those are terms that usually do not apply to image maps, which is what you have in your posted code. If you just want a dead spot(s) on your map where nothing happens, include this area in the area definitions:

HTML Code:

<area shape="default" nohref>

All undefined areas will then be inactive. If you want to define a blank area use:

HTML Code:

<area shape="rect" coords="300,90,450,110">

But, any active area that overlaps this one will probably take precedence. If you want irregular shapes as targets, that can be done with the poly shape.

**Johnnymushio** · 11-27-2005, 06:22 AM

What I meant was the anylink dropdown menu cells. By cells, I mean each little square that highlights when rolled over. I want certain ones to not highlight or link to anything. I'm not talking about the image maps, im talking about the dropdown menu. sorry if i am not making since.

**jscheuer1** · 11-27-2005, 06:52 AM

That makes much more sense, actually, you can change the content in the array for a particular entry from:

Code:

menu1[1]='<a href="Japan Town - English Chat.htm">English Chat</a>'

to:

Code:

menu1[1]='<span>English Chat</span>'

or if you want it blank:

Code:

menu1[1]='<span>&nbsp;</span>'

But to retain the border and other non-hover styling, you will need to add a span selector to the stylesheet that duplicates whatever you have for #dropmenudiv a, for example (addition red):

Code:

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

**paranoidandroid** · 02-19-2009, 10:59 AM

Originally Posted by jscheuer1

Here is where, in the code, that the positions of the drop downs are finalized each time one is activated:

Code:

dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"

To get it farther to the right and higher, as you say you would like, you need to add to the 'style.left' and subtract from the 'style.top'. The exact amounts would best be arrived at through trial and error but a good start woud be (adjustments added in red):

Code:

dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+75+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight-10+"px"

HELLO! I did exactly what you told, but the drop down menu still displays at the top left corner of the page rather than right below the area map! >.< HELP?? NEED HELP URGENTLY BY TOMORROW THANKS! =)

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")+75+"px"
var offsetHeight=mapflag? 0 : obj.offsetHeight+75
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, 

"bottomedge")+obj.offsetHeight-10+"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>


<div id="pict" style="position:absolute;top:270px;left:200px;">
<iframe name="mainframe" src="mainframe.php" FRAMEBORDER=no name="frame" 

allowTransparency scrolling=AUTO style="filter:chroma
(color=#FFFFFF)"  width="1000" height="532"></iframe>
</div>



</body>
</html>

**jscheuer1** · 02-19-2009, 04:00 PM

Please start a new thread for a new question. I know your question seems similar, but this is an old thread. I believe that the script in use back then has since been updated in the main script library. The modifications here will likely not (in their present form) work with it.

Thread: AnyLink Drop Down Menu with Image Maps

Thread Tools

Search Thread

AnyLink Drop Down Menu with Image Maps

Bookmarks

Bookmarks

Posting Permissions