Popup menu on webpages

[forester]

When your mouse is on a URL link on a webpage, sub menus will be popped up, just like windows apllication's menu system.
I am learning javascript, and want to learn the scripts for this, who will please to give me the sample codes.
Thank you very much!

[Sergey Kozlov]

Hi,

If you mean just a ToolTip (popup text) for html object, its implementation is very simple. "title" property sets the ToolTip text:
<a href="link.html" title="Popup Text">Link</a>

But I think that you meant the popup with context menu. The context menu menu popped up on RightClick can be implemented in this way:
<a href="link.html" title="Popup Text" oncontextmenu="onRightClick(event.x,event.y); return false">Link</a>

<SCRIPT LANGUAGE="Javascript">

function onRightClick(x, y)
{
var pHeight = 50;

var oPopup = window.createPopup();
var oPopupBody = oPopup.document.body;

var strHtml = '<TABLE border="0" BGCOLOR="#ffffee" CELLPADDING="0" CELLSPACING="0"><TR><TD><STYLE TYPE="text/css">';
strHtml += ' .normalStyle {padding:2px; text-align:left; font-weight:500; color:#000000; top:100px; font-family:Tahoma, Verdan, Helvetica, Sans-Serfif; background-color:#ffffee; layer-background-color:#ffffee; cursor:default; cursor: default; border:1px solid #000000;}';
strHtml += ' .optionStyle {display:block; width:auto; font-family:Tahoma, Verdan, Helvetica, Sans-Serfif; text-decoration:none; color:black; border:1px solid #ffffee; vertical-align:center; padding-left:5px; padding-right:2px;}';
strHtml += ' .hoverStyle {display:block; color:black; width:auto; background:rgb(234,242,255); border:1px solid rgb(120,172,255); padding-left:5px; padding-right:2px;}';
strHtml += 'td {font-size:8pt;}\n</STYLE>\n</td></tr></table>\n';
strHtml += '<TABLE class="normalStyle" BGCOLOR="#ffffee" WIDTH="140" HEIGHT="'+ pHeight +'" CELLPADDING="0" CELLSPACING="1">';

var strTableRaw = '<TR><TD class="optionStyle" onmouseover="this.className=\'hoverStyle\'" ONMOUSEOUT="this.className=\'optionStyle\'" '
var strMenuItem1 = strTableRaw + 'ONCLICK="window.parent.doSomething1();">&nbsp;Do Something I</TD></TR>';
var strMenuItem2 = strTableRaw + 'ONCLICK="window.parent.doSomething2();">&nbsp;Do Something II</TD></TR>';

oPopupBody.innerHTML = strHtml + strMenuItem1 + strMenuItem2 + '</TABLE>';
oPopup.show(x, y, 140, pHeight, document.body);

return false;
}

function doSomething1()
{
}

function doSomething2()
{
}

</SCRIPT>

[forester]

Thank you, Sergey Kozlov.
What I mean is that. when the mouse is moving over, the sub menus show. THen you can choose in the sub menus and click to the page you want to go.