Interdire l'affichage du menu contextuel par défaut
Salut tout le monde,
J'ai trouvé un petit script sympa qui me permet d'obtenir un menu contextuel différent sur le clic droit de la souris.
Le problème, c'est que le menu contextuel de Firefox et de IE apparaissent avec le menu contextuel que j'ai personnalisé.
Voici le code javascript de ce menu :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
| var curX;
var curY;
var idMenu;
function menuContextuel(e, pIdMenu){
if (e.button == 2){
if(pIdMenu != ''){
hideMenu();
idMenu = pIdMenu;
getCursorPosition(e);
showContextualMenu();
}
}else{
hideMenu();
}
}
function hideMenu(){
if((idMenu != '') && (idMenu != null)){
document.getElementById(idMenu).style.display = 'none';
}
}
function showContextualMenu(){
if(idMenu != ''){
document.getElementById(idMenu).style.display = 'block';
document.getElementById(idMenu).style.top = curY + 'px';
document.getElementById(idMenu).style.left = curX + 'px';
}
}
function getCursorPosition(e){
//ie
if(document.all){
curX = event.clientX;
curY = event.clientY;
}
//netscape 4
if(document.layers){
curX = e.pageX;
curY = e.pageY;
}
//mozilla
if(document.getElementById){
curX = e.clientX;
curY = e.clientY;
}
} |
Voici le menu en question qui est caché grâce à un fichier .css :
Code:
1 2 3 4 5 6 7
| <div id="menucontextuel1" class="menucontextuel">
<ul>
<li><em>Menu Pierre Van Antwerpen</em></li>
<li><a href="" onclick="hideMenu(); alert('Hello World !'); return false;">Occupé</a></li>
<li><a href="" onclick="hideMenu(); alert('Hello World !'); return false;">Libre</a></li>
</ul>
</div> |
et voici le fichier css :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
|
html, body, div{
margin: 0;
padding: 0;
}
body{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 75%;
}
.menucontextuel{
position: absolute;
/*cache le menu au démarrage de la page*/
display: none;
border: 1px solid #ccc;
background-color: #fff;
width: 200px;
font-size: 0.9em;
}
.menucontextuel ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.menucontextuel li{
height: 2em;
line-height: 2em;
}
.menucontextuel a{
text-decoration: none;
display: block;
color: #000;
padding-left: 15px;
}
.menucontextuel a:hover{
background-color: #999;
color: #fff;
}
.box{
width: 150px;
height: 150px;
background: #eee none;
border: 1px solid #ddd;
font-size: 0.9em;
cursor: help;
}
#box1{
position: absolute;
top: 50px;
left: 10px;
}
#box2{
position: absolute;
top: 50px;
left: 200px;
} |
tant qu'on y est, sauriez-vous me dire à quoi sert ceci svp ? :
Code:
1 2 3
| <script type="text/javascript">
document.body.oncontextmenu = function(){return false;}
</script> |
Voici le code original :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
| <?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="context.css" media="screen" />
<script type="text/javascript" src="context.js"></script>
<title>Menu contextuel</title>
</head>
<body onmouseup="menuContextuel(event, '');">
<div id="infos"></div>
<div class="box" id="box1" onmousedown="menuContextuel(event, 'menucontextuel1');">Boîte 1</div>
<div class="box" id="box2" onmousedown="menuContextuel(event, 'menucontextuel2');">Boîte 2</div>
<div id="menucontextuel1" class="menucontextuel">
<ul>
<li><em>Menu Pierre Van Antwerpen</em></li>
<li><a href="" onclick="hideMenu(); alert('Hello World !'); return false;">Occupé</a></li>
<li><a href="" onclick="hideMenu(); alert('Hello World !'); return false;">Libre</a></li>
</ul>
</div>
<div id="menucontextuel2" class="menucontextuel">
<ul>
<li><em>Menu 2</em></li>
<li><a href="">Recharger</a></li>
<li><a href="" onclick="hideMenu(); alert('Hello World !'); return false;">Hello World !</a></li>
<li><a href="http://blog.oli-web.com">oli web, le blog !</a></li>
</ul>
</div>
<script type="text/javascript">
// <![CDATA[
document.body.oncontextmenu = function(){return false;}
// ]]>
</script>
</body>
</html> |
Le fichier css et js sont identiques aux miens.
Merci d'avance pour votre aide.
beegees