dcsimg

How can I configure what appears in the pop up menu when you click on the right mouse button?

Created May 4, 2012

Jayesh Nazre

Well you can use a div tag and place your own customised menu in it, but you can't customize the browser's popup menu. Here's how you can trap the various mouse events and hide/show with the div tag.

For IE5+: 


<html>
<head>
<script language=javascript>
function test() {
  var div_ref = document.all("id_div");
  div_ref.style.top = event.clientY;
  div_ref.style.left = event.clientX;
  div_ref.style.visibility = "visible";
  return (false);
}

function hideMenu() {
  var div_ref = document.all("id_div");
  div_ref.style.visibility = "hidden";
}

document.oncontextmenu=test;
document.onclick=hideMenu;
</script>
</head>
<body bgcolor='Silver'>

<div name=id_div id=id_div 
  STYLE="position: absolute; visibility : hidden; width : 0px; height : 0px">

<table border=1>
<tr><td><a href="http://www.jguru.com">TEST1</a></td></tr>
<tr><td><a href="http://java.sun.com">TEST2</a></td></tr>
</table>

</div>

</body>
</html>
For NS4.6 : 

<html>
<head>
<script language=javascript>

function test(e) {

var lb_flag = true;
  if (e.which == 3) {     
    var div_ref = document.layers["id_div"];
    div_ref.top = e.pageY;
    div_ref.left = e.pageX;
    div_ref.visibility = "visible";
    lb_flag = false;
  }
  return (lb_flag);
}

function hideMenu() {
  var div_ref = document.layers["id_div"];
  div_ref.visibility = "hidden";
}

window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=test;
document.onclick=hideMenu;
</script>
</head>
<body bgcolor='Silver'>


<div name=id_div id=id_div 
  STYLE="position: absolute; visibility : hidden; width : 0px; height : 0px">

<table border=1>
<tr><td><a href="http://www.jguru.com">TEST1</a></td></tr>
<tr><td><a href="http://java.sun.com">TEST2</a></td></tr>
</table>

</div>

</body>
</html>