将下面的代码复制到 <body> 内 <style> <!-- /* Context menu Script- ?Dynamic Drive (www.dynamicdrive.com) Last updated: 00/03/28 For full source code, 100's more DHTML scripts, and Terms Of Use, visit dynamicdrive.com */.skin0{ position:absolute; width:200px; border:2px solid black; background-color:menu; font-family:Verdana; line-height:20px; cursor:default; visibility:hidden; }.skin1{ cursor: default; font: menutext; position: absolute; width: 165px; background-color: menu; border: 1 solid buttonface; visibility:hidden; border: 2 outset buttonhighlight; }.menuitems{ padding-left:15px; padding-right:10px; } --> </style><script language="JavaScript1.2"> //set the skin of the menu (0 or 1, with 1 rendering a default Windows menu like skin) var menuskin=1//set this variable to 1 if you wish the URLs of the highlighted menu to be displayed in the status bar var display_url=0 function showmenuie5(){ //Find out how close the mouse is to the corner of the window var rightedge=document.body.clientWidth-event.clientX var bottomedge=document.body.clientHeight-event.clientY//if the horizontal distance isn't enough to accomodate the width of the context menu if (rightedge<ie5menu.offsetWidth) //move the horizontal position of the menu to the left by it's width ie5menu.style.left=document.body.scrollLeft+event.clientX-ie5menu.offsetWidth else //position the horizontal position of the menu where the mouse was clicked ie5menu.style.left=document.body.scrollLeft+event.clientX//same concept with the vertical position if (bottomedge<ie5menu.offsetHeight) ie5menu.style.top=document.body.scrollTop+event.clientY-ie5menu.offsetHeight else ie5menu.style.top=document.body.scrollTop+event.clientYie5menu.style.visibility="visible" return false }function hidemenuie5(){ ie5menu.style.visibility="hidden" }function highlightie5(){ if (event.srcElement.className=="menuitems"){ event.srcElement.style.backgroundColor="highlight" event.srcElement.style.color="white" if (display_url==1) window.status=event.srcElement.url } }function lowlightie5(){ if (event.srcElement.className=="menuitems"){ event.srcElement.style.backgroundColor="" event.srcElement.style.color="black" window.status='' } }function jumptoie5(){ if (event.srcElement.className=="menuitems"){ if (event.srcElement.getAttribute("target")!=null) window.open(event.srcElement.url,event.srcElement.getAttribute("target")) else window.location=event.srcElement.url } } </script> 修改下面的代码并复制到 <body> 内 <!--[if IE]> <div id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5()"> <div class="menuitems" url="http://dynamicdrive.com">Dynamicdrive.com</div> <div class="menuitems" url="http://dynamicdrive.com/new.htm" target="newwin">What's New?</div> <div class="menuitems" url="http://dynamicdrive.com/hot.htm">What's Hot?</div> <div class="menuitems" url="http://wsabstract.com/cgi-bin/Ultimate.cgi">Message Forum</div> <div class="menuitems" url="http://dynamicdrive.com/faqs.htm">FAQs</div> <div class="menuitems" url="http://dynamicdrive.com/submitscript.htm">Submit</div> <hr> <div class="menuitems" url="mailto:[email protected]">Email Us</div> </div> <![endif]--> <script language="JavaScript1.2"> if (document.all&&window.print){ if (menuskin==0) ie5menu.className="skin0" else ie5menu.className="skin1" document.oncontextmenu=showmenuie5 document.body.onclick=hidemenuie5 } </script>
================================
** [email protected] **
================================<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style>
.menu{ cursor: hand;
display: none;
position: absolute;
top: 0; left: 0;
overflow: hidden;
background-color: "#CFCFCF";
border: "1 solid";
border-top-color: "#EFEFEF";
border-left-color: "#EFEFEF";
border-right-color: "#505050";
border-bottom-color: "#505050";
font: 10pt 宋体;
margin:0pt;padding: 2pt
} .menu SPAN {width: 100%; cursor: hand; padding-left: 10pt}
.menu SPAN.selected {background: navy; color:white; cursor: hand}
</style><xml id="contextDef">
<xmldata>
<contextmenu id="demo">
<item id="viewsource" value="查看源文件"/>
<item id="back" value="后退……"/>
<item id="meng" value="访问【孟宪会之精彩世界】"/>
<item id="calculate" value="执行 JavaScript 代码"/>
</contextmenu>
<contextmenu id="demob">
<item id="菜单项例子1" value="菜单项例子1" />
<item id="菜单项例子2" value="菜单项例子2" />
</contextmenu>
</xmldata>
</xml><SCRIPT>// 定义全局变量var bContextKey=false;function fnGetContextID(el) {
while (el!=null) {
if (el.contextmenu) return el.contextmenu
el = el.parentElement
}
return ""
}function fnDetermine(){
oWorkItem=event.srcElement; //键盘上的菜单键被按下时。
if(bContextKey==true){
//如果菜单的“状态”为“false”
if(oContextMenu.getAttribute("status")=="false"){
//捕获鼠标事件,以便和页面交互。
oContextMenu.setCapture(); //根据鼠标位置,确定菜单位置。
oContextMenu.style.top=event.clientY + document.body.scrollTop + 1;
oContextMenu.style.left=event.clientX + document.body.scrollLeft + 1; oContextMenu.innerHTML="";
//设定菜单的“状态”为“true”
var sContext = fnGetContextID(event.srcElement)
if (sContext!="") {
fnPopulate(sContext)
oContextMenu.setAttribute("status","true");
event.returnValue=false;
}
else
event.returnValue=true
}
}
else{
// 如果键盘菜单键没有按下,并且菜单的“状态”为“true”。
if(oContextMenu.getAttribute("status")=="true"){
if((oWorkItem.parentElement.id=="oContextMenu") && (oWorkItem.getAttribute("component")=="menuitem")){
fnFireContext(oWorkItem)
} // 当鼠标离开菜单或单击菜单项后,重设菜单(隐藏)
oContextMenu.style.display="none";
oContextMenu.setAttribute("status","false");
oContextMenu.releaseCapture();
oContextMenu.innerHTML="";
event.returnValue=false;
}
}
}
function fnPopulate(sID) {
var str=""
var elMenuRoot = document.all.contextDef.XMLDocument.childNodes(0).selectSingleNode('contextmenu[@id="' + sID + '"]')
if (elMenuRoot) {
for(var i=0;i<elMenuRoot.childNodes.length;i++)
str+='<span component="menuitem" menuid="' +
elMenuRoot.childNodes[i].getAttribute("id") +
'" id=oMenuItem' + i + '>' +
elMenuRoot.childNodes[i].getAttribute("value") +
"</SPAN><BR>"
oContextMenu.innerHTML=str;
oContextMenu.style.display="block";
oContextMenu.style.pixelHeight = oContextMenu.scrollHeight
}
}function fnChirpOn(){
if((event.clientX>0) &&(event.clientY>0) &&(event.clientX<document.body.offsetWidth) &&(event.clientY<document.body.offsetHeight)){
oWorkItem=event.srcElement;
if(oWorkItem.getAttribute("component")=="menuitem"){
oWorkItem.className = "selected"
}
}
}
function fnChirpOff(){
if((event.clientX>0) && (event.clientY>0) && (event.clientX<document.body.offsetWidth) && (event.clientY<document.body.offsetHeight)){
oWorkItem=event.srcElement;
if(oWorkItem.getAttribute("component")=="menuitem"){
oWorkItem.className = ""
}
}
}function fnInit(){
if (oContextMenu) {
oContextMenu.style.width=180;
oContextMenu.style.height=document.body.offsetHeight/2;
oContextMenu.style.zIndex=2;
//设置菜单样式
document.oncontextmenu=fnSuppress;
}
}function fnInContext(el) {
while (el!=null) {
if (el.id=="oContextMenu") return true
el = el.offsetParent
}
return false
}function fnSuppress(){
if (!(fnInContext(event.srcElement))) {
oContextMenu.style.display="none";
oContextMenu.setAttribute("status","false");
oContextMenu.releaseCapture();
bContextKey=true;
} fnDetermine();
bContextKey=false;
}function javameng(){
window.open("http://lucky.myrice.com","_blank","width=400,height=400,top=20,left=20")
}function fnFireContext(oItem) {
// 自定义上下文菜单项的功能
switch (oItem.menuid) {
case "viewsource":
location.href = "view-source:" + location.href
break;
case "back":
history.back()
break;
case "meng":
location.href="http://lucky.myrice.com"
break;
case "calculate":
javameng()
break;
default:
alert("你点击的菜单项是:\n\n\n" + oItem.menuid +"啊!!!")
}
}
</SCRIPT><BODY onload="fnInit()" onclick="fnDetermine()" bgcolor="#ccffcc">
<div status="false" onmouseover="fnChirpOn()" onmouseout="fnChirpOff()" id="oContextMenu" class="menu"></div>
... 这里放你任意的其他的东西! ...<br>... 这里放你任意的其他的东西! ...<br>... 这里放你任意的其他的东西! ...<br><br>
<P contextmenu="demo">这里是利用上下文菜单的里子!你把鼠标移动到这里,然后单击鼠标又键,可以看到菜单内容!<br>这里是利用上下文菜单的里子!你把鼠标移动到这里,然后单击鼠标又键,可以看到菜单内容!<br>这里是利用上下文菜单的里子!你把鼠标移动到这里,然后单击鼠标又键,可以看到菜单内容!<br>这里是利用上下文菜单的里子!你把鼠标移动到这里,然后单击鼠标又键,可以看到菜单内容!<br>这里是利用上下文菜单的里子!你把鼠标移动到这里,然后单击鼠标又键,可以看到菜单内容!<br></p>
<p>你也可以把鼠标放到下面的图象上面,点击又键!<p>
<center><IMG SRC="http://lucky.myrice.com/javabk1.jpg" contextmenu="demob">
</body>
</html>
<style>
<!--
/*
Context menu Script-
?Dynamic Drive (www.dynamicdrive.com) Last updated: 00/03/28
For full source code, 100's more DHTML scripts, and Terms Of Use,
visit dynamicdrive.com
*/.skin0{
position:absolute;
width:200px;
border:2px solid black;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:default;
visibility:hidden;
}.skin1{
cursor: default;
font: menutext;
position: absolute;
width: 165px;
background-color: menu;
border: 1 solid buttonface;
visibility:hidden;
border: 2 outset buttonhighlight;
}.menuitems{
padding-left:15px;
padding-right:10px;
}
-->
</style><script language="JavaScript1.2">
//set the skin of the menu (0 or 1, with 1 rendering a default Windows menu like skin)
var menuskin=1//set this variable to 1 if you wish the URLs of the highlighted menu to be displayed in the status bar
var display_url=0
function showmenuie5(){
//Find out how close the mouse is to the corner of the window
var rightedge=document.body.clientWidth-event.clientX
var bottomedge=document.body.clientHeight-event.clientY//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<ie5menu.offsetWidth)
//move the horizontal position of the menu to the left by it's width
ie5menu.style.left=document.body.scrollLeft+event.clientX-ie5menu.offsetWidth
else
//position the horizontal position of the menu where the mouse was clicked
ie5menu.style.left=document.body.scrollLeft+event.clientX//same concept with the vertical position
if (bottomedge<ie5menu.offsetHeight)
ie5menu.style.top=document.body.scrollTop+event.clientY-ie5menu.offsetHeight
else
ie5menu.style.top=document.body.scrollTop+event.clientYie5menu.style.visibility="visible"
return false
}function hidemenuie5(){
ie5menu.style.visibility="hidden"
}function highlightie5(){
if (event.srcElement.className=="menuitems"){
event.srcElement.style.backgroundColor="highlight"
event.srcElement.style.color="white"
if (display_url==1)
window.status=event.srcElement.url
}
}function lowlightie5(){
if (event.srcElement.className=="menuitems"){
event.srcElement.style.backgroundColor=""
event.srcElement.style.color="black"
window.status=''
}
}function jumptoie5(){
if (event.srcElement.className=="menuitems"){
if (event.srcElement.getAttribute("target")!=null)
window.open(event.srcElement.url,event.srcElement.getAttribute("target"))
else
window.location=event.srcElement.url
}
}
</script>
修改下面的代码并复制到 <body> 内
<!--[if IE]>
<div id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5()">
<div class="menuitems" url="http://dynamicdrive.com">Dynamicdrive.com</div>
<div class="menuitems" url="http://dynamicdrive.com/new.htm" target="newwin">What's New?</div>
<div class="menuitems" url="http://dynamicdrive.com/hot.htm">What's Hot?</div>
<div class="menuitems" url="http://wsabstract.com/cgi-bin/Ultimate.cgi">Message Forum</div>
<div class="menuitems" url="http://dynamicdrive.com/faqs.htm">FAQs</div>
<div class="menuitems" url="http://dynamicdrive.com/submitscript.htm">Submit</div>
<hr>
<div class="menuitems" url="mailto:[email protected]">Email Us</div>
</div>
<![endif]-->
<script language="JavaScript1.2">
if (document.all&&window.print){
if (menuskin==0)
ie5menu.className="skin0"
else
ie5menu.className="skin1"
document.oncontextmenu=showmenuie5
document.body.onclick=hidemenuie5
}
</script>