View Full Version : AnyLink Drop Down Menu - Position problems

12-07-2005, 01:29 AM
AnyLink Drop Down Menu

I really want the menu to expand directly below the link.

For some reason it appears to the left of the link. Seen here by mousing over the 'Golf' square:

Thanks in advance for help on this!

12-07-2005, 04:06 AM
The reason it doesn't work as expected is because you're using this script inside an image map, so the script does not know where exactly to drop down relative to the "hot" zone. In your case, modify the script as follows to correctly drop down beneath the Golf square:

1) Replace function dropdownmenu() inside the code of Step 1 with the below version instead:

function dropdownmenu(obj, e, menucontents, menuwidth){
var offsetfrommap=parseInt(obj.coords)
var obj=document.getElementById("mainimage") //change obj parameter to reference image map img instead
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv

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

return clickreturnvalue()

2), Then, modify your HTML to give the image used by the image map an ID:

<IMG id="mainimage" height=321
src="client_files/photo_home.jpg" width=703 useMap=#photo_home

That's it.

12-07-2005, 04:31 AM
Thank you so much for the answer!

I plan on having a drop down menu for each of the (4) squares.

One for the 'Golf' square and the other (3) square areas.

Is that possible with the current code?

Thanks again!! (:

12-07-2005, 05:04 AM
Yes it should work, assuming the onMouseover part is added to the <area> tag of each square. If it doesn't work, just post here again. :)