Forum Moderators: not2easy
I am using an image map for my links, however i want a drop down menu from some of those links.
The drop down works fine however it appears in the wrong place (e.g 6 inches to the left of the actual link)
Can someone tell me how to position these drop down menus so that they appear under the link they are attached to.
Here is the work that i have done on it so far, obviously only the important stuff.
<style>
body{font-family:arial; }
a{color:black;text-decoration:none;font:bold}
a:hover{color:teal}
td.menu{background:blue}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden"
}
</script>
<area shape="rect" coords="435,130,525,155" onmouseover="showmenu('where')"onmouseout="hidemenu('where')"
a href="photo.html" alt="photos">
<table class="menu" id="where" >
<tr><td class="menu"><a href="ukphoto.html">In the UK</a></td></tr>
<tr><td class="menu"><a href="abroadphoto.html">Abroad</a></td></tr>
</table>
As i have explained the drop down works fine but it appears in the wrong place.
Thanks in advance for any help :)
I think your solution for your drop down menu positioning may lie within your javascript development.
A CSS Solution for "Image maps" is entirely different than defining dimensions of a "hot spot" with the <area> element and takes no Javascript at all.
I'd encourage you to post this in a more pertinent forum. I'm next to clueless when it comes to javascript development.
[webmasterworld.com...]