Exercise 2: Context menu- Position / selection / Opacity

[pamelafluente]

My last exercise before going to sleep ...

I am doing for exercise a context menu. The idea is to have it open
when it hovers
some given DIVs.

I am missing the way to move it to the DIV position. I have written a
small function to move, but it does not move. Also it should move where
the mouse is and than when popped up the mouse should continue to move
over the menu. Here is my attempt:

<div id="ElementWhereMenuAppears" style="top: 500px; left: 100px"
onmouseover =
"MoveAndShowMenu(document.getElementById('ContextMenu'), this)"
onmouseout = "HideMenu(document.getElementById('ContextMenu'))"

<a >Click Here </a></div>

<br />
<br />

<div id="ContextMenu" style="display: none; font:menu" >

<div id="MenuItem1" style="width: 100px; height: 20px;
background-color:#eeeeff"
onmouseover = "MenuItemOver(this)"
onmouseout = "MenuItemOut(this)"
onclick = "MenuItemClik(this)" > MenuItem 1</div>

<div id="MenuItem2" style="width: 100px; height: 20px;
background-color:#eeeeff"
onmouseover = "MenuItemOver(this)"
onmouseout = "MenuItemOut(this)"
onclick = "MenuItemClik(this)" > MenuItem 2</div>

</div>


Where I have these functions in a js file:


// Menuitem ----------------------------------------------------

function MenuItemOver(MyDiv)
{
PreviousStyle = MyDiv.style.borderStyle;
MyDiv.style.borderStyle = "double";
}
function MenuItemOut(MyDiv)
{
MyDiv.style.borderStyle = "none";
}

function MenuItemClik(MyDiv)
{
alert("Clicked " + MyDiv.id );
}

function MoveAndShowMenu(MyMenu, MyDiv)
{
MyMenu.style.top = MyDiv.style.top ; //not work !
MyMenu.style.left = MyDiv.style.left ;
MyMenu.style.display = "block"
}

function HideMenu(MyMenu)
{
MyMenu.style.display = "none"
}


I am missing the move-to-the-mouse-down and selection part.


Further I have seen on the web that these menu are often
semitransparent: what is the attribute to make them so?

-Pam