Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


Position of a div layer

Posted on 2003-11-16
Medium Priority
Last Modified: 2008-03-04
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:

<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;
<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; ">
<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>

So far I have only done the first menu.

Cappy Reeves

p.s. if there is anything i need to do let me know.
Question by:viperman95833
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
  • 2
LVL 11

Expert Comment

ID: 9760160
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).

Author Comment

ID: 9760241
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?

Cappy Reeves
LVL 15

Expert Comment

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

regards Jakoba
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

LVL 11

Accepted Solution

Zontar earned 700 total points
ID: 9760881
Example (general):

menuid.style.left = "50px";
menuid.style.top = "35px";

More specific, something like

menuid.style.left = img.offsetLeft + "px";  //  set the left edge of the div same as the left edge of the img
menuid.style.top = img.offsetTop + img.height = "px"; // set the top edge of the div same as the bottom edge of the img

...if I understand what you're trying to do correctly.

LVL 11

Expert Comment

ID: 9760893
>  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).
LVL 15

Expert Comment

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

Author Comment

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

Cappy Reeves
LVL 11

Expert Comment

ID: 9761331
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?)

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

618 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question