asked on

Position of a div layer

I am trying to create a dropdown menu but I cant figure out how to get the menu to show under the img that I am using for the menu. Here is the code I have so far:

<html>
<head>
<title>Show menu</title>
<script language="javascript" type="text/javascript">
function menu_show(menu) {
var menuid = document.getElementById("menu_" + menu);
var img = document.getElementById("img_" + menu);
menuid.style.display = "block";
var imgx = img.x;
var imgy = img.y;
menuid.x = imgx + 5;
menuid.y = imgy + 100;
}
function menu_hide(menu) {
var menuid = document.getElementById("menu_" + menu);
menuid.style.display = "none";
}
function menu_bg(what, img) {
var menu_bg = document.getElementById(what);
menu_bg.background = img;
}
</script>
</head>
<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
<img src="../../images/scripts.gif" id="img_scripts" onMouseOver="menu_show('scripts');" onMouseOut="menu_hide('scripts');">
<img src="../../images/tutorials.gif" id="img_tutorials">
<img src="../../images/polls.gif" id="img_polls">
<img src="../../images/profile.gif" id="img_profile">
<div id="menu_scripts" style=" position:relative;display:none; ">
<table>
<tr><td background="images/Menu_bg.gif" onMouseOver="menu_bg('row_php', 'Menu_bg_over.gif')" id="row_php"><a href="../../Web%20App/scripts.php?cat=php">PHP</a></td></tr>
<tr><td background="images/Menu_bg.gif" onMouseOver="menu_bg('row_html', 'Menu_bg_over.gif')" id="row_html"><a href="scripts.php?cat=html">HTML</a></td></tr>
</table>
</div>
</body>
</html>

So far I have only done the first menu.

Thanks,
Cappy Reeves

p.s. if there is anything i need to do let me know.

Zontar

var imgx = img.offsetTop;
var imgy = img.offsetLeft;

However, with a little redesign, you could get rid of the need to test position altogether. Here's one way to do it: http://www.alistapart.com/articles/dropdowns/

My own preferred method for building dropdowns is to use unordered lists plus CSS (and a little JS for MSIE since it doesn't support :hover on anything but links).

viperman95833

ASKER

that got rid of the error however. It dosn't position the layer. how would I get the layer to beable to be positioned where I want so that I can move it to under the img or a little over?

Thanks,
Cappy Reeves

JakobA

here is a page where layers are placed relative to an image (hidden) in each link
http://hjem.get2net.dk/Jakob.Aggernaes/temp/exp93955.html

regards Jakoba

ASKER CERTIFIED SOLUTION

Zontar

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Zontar

> here is a page where layers are placed relative to an image (hidden) in each link

Unnecessary hack. It's quite possible to build a pulldown menu using no positioning whatsoever (unless you're worried about NS4 which I'm not anymore).

JakobA

>> Zontar : your call :-))
I hope you wont mind if I keep making my code as crossbrowser compatible as I can.

viperman95833

ASKER

Good Job. I wasn't putting the "px" in there so the computer was thinking number not pixles. Sweet!

Thanks,
Cappy Reeves

Zontar

Well, what Viperman's got there is only good for the version 5+ browsers anyway. ;-)

(I just hate the whole concept of "layers" -- it's so 20th Century, you know?)