IDC资讯中心
<html>
<head>
<title>使用javascript和css制作仿office xp风格的网页右键菜单</title>
<style>
.flyoutlink {
cursor: none; font-family: "verdana", "arial", "helvetica"; font-size: 14px; padding-left: 5px; padding-right: 25px; padding-top: 1px
}
.skin0 {
border-right: 1px solid; border-top: 1px solid; visibility: hidden; border-left: 1px solid; width: 110px; cursor: default; line-height: 20px; border-bottom: 1px solid; font-family: verdana; position: absolute; background-color: white
}
.skin1 {
border-right: buttonhighlight 2px outset; border-top: buttonhighlight 2px outset; visibility: hidden; border-left: buttonhighlight 2px outset; width: 90px; cursor: default; border-bottom: buttonhighlight 2px outset; position: absolute; background-color: white
}
</style>
</head>
<script language=javascript>
//用于模仿office xp的风格
function mouseover(src,backcolor)
{
if (!src.contains(event.fromelement))
{
src.bgcolor = backcolor;
src.style.bordercolor = "#000000";
}
}
function mouseout(src, backcolor)
{
if (!src.contains(event.toelement))
{
src.bgcolor = backcolor;
src.style.bordercolor = "#000000";
}
}
function bcmouseover(src)
{
if (!src.contains(event.fromelement))
{
src.border = 1;
src.style.bgcolor = "#b6bdd2"
}
}
function bcmouseout(src)
{
if (!src.contains(event.toelement))
{
src.border = 0;
src.style.bgcolor = "#f1f1f1"
}
}
//弹出消息
function mm_gotourl() { //v3.0
var i, args=mm_gotourl.arguments; document.mm_returnvalue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location="+args[i+1]+"");
}
function mm_popupmsg(msg) { //v1.0
alert(msg);
}
</script>
<div id=ie5menu style="backgroundcolor=white">
<table width="150" border="0" bgcolor="#f1f1f1" bordercolor="#000000" cellpadding="0" cellspacing="0">
<tr bordercolor="#f1f1f1">
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" onmouseout="bcmouseout(this);" onmouseover="bcmouseover(this);" bordercolor="#000000" bgcolor="#f1f1f1" bordercolorlight="#000000" bordercolordark="#000000">
<tr bgcolor="#f1f1f1" bordercolor="#b6bdd2" onmouseout="mouseout(this,#f1f1f1);" onmouseover="mouseover(this,#b6bdd2);" onclick="location.reload()">
<td width="26"><img border="0" src="refurbish.gif" width="24"></td>
<td class=flyoutlink>刷新</td>
</tr>
</table>
</td>
</tr>
<tr bordercolor="#f1f1f1">
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" onmouseout="bcmouseout(this);" onmouseover="bcmouseover(this);" bordercolor="#000000" bgcolor="#f1f1f1" bordercolorlight="#000000" bordercolordark="#000000">
<tr bgcolor="#f1f1f1" bordercolor="#b6bdd2" onmouseout="mouseout(this,#f1f1f1);" onmouseover="mouseover(this,#b6bdd2);" onclick="window.close()">
<td width="26"><img border="0" src="close.gif" width="24"></td>
<td class=flyoutlink>关闭窗口</td>
</tr>
</table>
</td>
</tr>
<tr bordercolor="#f1f1f1">
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" onmouseout="bcmouseout(this);" onmouseover="bcmouseover(this);" bordercolor="#000000" bgcolor="#f1f1f1" bordercolorlight="#000000" bordercolordark="#000000">
<tr bgcolor="#f1f1f1" bordercolor="#b6bdd2" onmouseout="mouseout(this,#f1f1f1);" onmouseover="mouseover(this,#b6bdd2);" onclick="history.go(-1)">
<td width="26"><img border="0" src="back.gif" width="24"></td>
<td class=flyoutlink>后退</td>
</tr>
</table>
</td>
</tr>
<tr bordercolor="#f1f1f1">
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" onmouseout="bcmouseout(this);" onmouseover="bcmouseover(this);" bordercolor="#000000" bgcolor="#f1f1f1" bordercolorlight="#000000" bordercolordark="#000000">
<tr bgcolor="#f1f1f1" bordercolor="#b6bdd2" onmouseout="mouseout(this,#f1f1f1);" onmouseover="mouseover(this,#b6bdd2);" onclick="history.go(1)">
<td width="26"><img border="0" src="forward.gif" width="24"></td>
<td class=flyoutlink>前进</td>
</tr>
</table>
</td>
</tr>
<tr bordercolor="#f1f1f1">
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" onmouseout="bcmouseout(this);" onmouseover="bcmouseover(this);" bordercolor="#000000" bgcolor="#f1f1f1" bordercolorlight="#000000" bordercolordark="#000000">
<tr bgcolor="#f1f1f1" bordercolor="#b6bdd2" onmouseout="mouseout(this,#f1f1f1);" onmouseover="mouseover(this,#b6bdd2);" onclick="mm_popupmsg(欢迎使用仿office xp风格的网页右键菜单程序\r欢迎大家给我来信\reaststarbuy@sina.com)">
<td width="26"><img border="0" src="about.gif" width="24"></td>
<td class=flyoutlink>关于本菜单</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script type=text/javascript>
//检测浏览器
ie = (document.all)? true:false
if (ie){
function ctlent(eventobject){if(event.ctrlkey && window.event.keycode==13){this.document.form.submit();}}
}
clckcnt = 0;
var nn = !!document.layers;
var ie = !!document.all;
if (nn) {
netscape.security.privilegemanager.enableprivilege("universalsystemclipboardaccess");
var fr=new java.awt.frame();
var zwischenablage = fr.gettoolkit().getsystemclipboard();
}
var menuskin=0
var display_url=0
//显示右键菜单
function showmenuie5(){
var rightedge=document.body.clientwidth-event.clientx
var bottomedge=document.body.clientheight-event.clienty
//菜单定位
if (rightedge<ie5menu.offsetwidth)
ie5menu.style.left=document.body.scrollleft+event.clientx-ie5menu.offsetwidth
else
ie5menu.style.left=document.body.scrollleft+event.clientx
if (bottomedge<ie5menu.offsetheight)
ie5menu.style.top=document.body.scrolltop+event.clienty-ie5menu.offsetheight
else
ie5menu.style.top=document.body.scrolltop+event.clienty
ie5menu.style.visibility="visible"
return false
}
//右键菜单隐藏
function hidemenuie5(){
ie5menu.style.visibility="hidden"
}
if (document.all&&window.print){
if (menuskin==0)
ie5menu.classname="skin0"
else
ie5menu.classname="skin1"
document.oncontextmenu=showmenuie5
document.body.onclick=hidemenuie5
}
</script>
<body>
<p>欢迎使用本菜单，欢迎大家给我来信。</p>
</body>
</html>
注意：使用的时候把图片改掉就可以了。。
效果不是怎么好。图片的效果没有做出来。。。
