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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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&eacute;</a></li>
  			<li><a href="" onclick="hideMenu(); alert('Hello World !'); return false;">Libre</a></li>
  		</ul>
  	</div>

et voici le fichier css :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
<script type="text/javascript">
    	document.body.oncontextmenu = function(){return false;}
  	</script>
Voici le code original :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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&icirc;te 1</div>
		<div class="box" id="box2" onmousedown="menuContextuel(event, 'menucontextuel2');">Bo&icirc;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&eacute;</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