PDA

View Full Version : Anylinkcssmenu drop down position over image



pergeal23
08-22-2010, 06:34 PM
1) Script Title: Anylinkcssmenu.js v.2.21

2) Script URL (on DD):

3) Describe problem: I display a map image on the screen using map, area, shape command in the html and I want to have the drop down menu appear where the cursor is but I cannot work out how to tell tell the script where to position the menu dynamically. The menu always appears in the top left corner of the image not where the cursor is. How can I tell the menu script where to position the menu with parameters.

Look at the following www.thevillagedirectory.co.uk/amap2.htm move pointer to either of the two circled areas and the menu appears top left, I want it to appear next to the circle by providing x,y coordinates to the script or ideally the script will do this automatically.

Sorry if this is a noob question!!:o

Thanks.

[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Default Example</title>

<link rel="stylesheet" type="text/css" href="anylinkcssmenu.css" />
<script type="text/javascript" src="anylinkcssmenu.js">

/***********************************************
* AnyLink CSS Menu script v2.0- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm for full source code
***********************************************/

</script>
<script type="text/javascript">
anylinkcssmenu.init("anchorclass")
</script>

</head>

<body>
<img src="/maps/TN257.gif" usemap="#TN" alt="map"/>
<map name="TN">
<area shape="circle" coords="837,415,50" nohref" class="anchorclass" rel="AldingtonDD" />
<area shape="circle" coords="540,357,50" nohref" class="anchorclass" rel="FrithDD" />
</map>


<div id="AldingtonDD" class="anylinkcss">
<div class="column">
<b>Aldington</b>
<ul>
<li><a href="/Aldington/Events.htm/">Events</a></li>
<li><a href="/Aldington/Photos">Photos</a></li>
<li><a href="/Aldington/History">History</a></li>
</ul>
</div>
</div>


<div id="FrithDD" class="anylinkcss">
<div class="column">
<b>Frith</b>
<ul>
<li><a href="/Frith/Events.htm/">Events</a></li>
<li><a href="/Frith/Photos">Photos</a></li>
<li><a href="/Frith/History">History</a></li>
</ul>
</div>
</div>


</body>

</html>
[CODE]

pergeal23
08-23-2010, 12:09 PM
Added some extra code to the .js works fine now.:D