document.oncontextmenu = MaFonctionJS;

Code à placer dans la partie head

 - Définition des styles (dans la partie head ou dans un .css) :

<style>
.ContextMenu {
cursor:default;
font:menutext;
position:absolute;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
width:120px;
background-color:menu;
border:1 solid buttonface;
visibility:hidden;
border:2 outset buttonhighlight;
}

.ContextMenuOver{
color:white;
font-size:11;
font-weight:700;
background:midnightblue;
}

.ContextMenuOut{
color:black;
font-size:11;
font-weight:500;
background:;
}
</style>

 - JavaScript (dans la partie head ou dans un .js) :

<script language="JavaScript">
function MontrerMenu() {
// Disance par rapport aux bords de la fenetre
var EspaceDroit = document.body.clientWidth-event.clientX;
var EspaceBas = document.body.clientHeight-event.clientY;

// Affichage du menu suivant la position du curseur
if (EspaceDroit < CMenu.offsetWidth)
CMenu.style.left = document.body.scrollLeft + event.clientX - CMenu.offsetWidth;
else
CMenu.style.left = document.body.scrollLeft + event.clientX;

if (EspaceBas < CMenu.offsetHeight){
CMenu.style.top = document.body.scrollTop + event.clientY - CMenu.offsetHeight; }
else{
CMenu.style.top = document.body.scrollTop + event.clientY; }

// Affichage du menu
CMenu.style.visibility = "visible";
return false;
}

function MasquerMenu(){
CMenu.style.visibility = "hidden";
}
</script>


Code à placer dans la partie body

 - Code html du menu :

<span id="CMenu" class="ContextMenu" style="visibility:hidden;">
<table width="200" cellpadding="0" cellspacing="0" class="texte" style="display:inline;">
  <tr height="20" onClick="history.go(-1);"
    onMouseOut="this.className='ContextMenuOut';" onMouseOver="this.className='ContextMenuOver';">
  <td width="25"></td><td width="175"> Page precédente</td></tr>
  <tr height="20" onClick="history.go(+1);"
    onMouseOut="this.className='ContextMenuOut';" onMouseOver="this.className='ContextMenuOver';">
  <td></td><td> Page suivante</td></tr>
  <tr height="10"><td colspan="2"><hr width="95%" align="center"></td></tr>
  <tr height="20" onclick="window.location='../index.html';"
    onMouseOut="this.className='ContextMenuOut';" onMouseOver="this.className='ContextMenuOver';">
  <td><img src="../Images/ICO_HomeSmall.gif" width="17"></td><td> Accueil</td></tr>
  <tr height="20" onclick="window.location='../Accueil/PlanDuSite.html';"
    onMouseOut="this.className='ContextMenuOut';" onMouseOver="this.className='ContextMenuOver';">
  <td><img src="../Images/ICO_Plan.gif" width="19"></td><td> Plan du site</td></tr>
  <tr height="20" onclick="window.location='../Downloads/Downloads.html';"
    onMouseOut="this.className='ContextMenuOut';" onMouseOver="this.className='ContextMenuOver';">
  <td><img src="../Images/ICO_Download.gif" width="19"></td><td> Downloads</td></tr>
</table>
</span>


 - JavaScript :

<script language="JavaScript">
   if (document.all && window.print) {
     document.oncontextmenu = MontrerMenu;
     document.body.onclick = MasquerMenu;
   }
</script>