PDA

View Full Version : AnyLink Drop Down Menu - Position problems



Goweb
12-07-2005, 01:29 AM
AnyLink Drop Down Menu
http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

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:
http://www.prowebmarketing.com/agaming/

Thanks in advance for help on this!

ddadmin
12-07-2005, 04:06 AM
Hi:
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()
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")+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
border=0>

That's it.

Goweb
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!! (:

ddadmin
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. :)