< script type="text/ javascript">//오른쪽 클릭 메뉴 비활성화 document.oncontextmenu=ContextMenu //마우스 오른쪽 클릭 이벤트 function ContextMenu() { //표시되는 메뉴의 좌표로 두 개의 변수를 생성합니다. var x; var y //메뉴의 외부 Div 가져오기(이하 패널) var FramePanel=document.getElementById("FrameDiv"); //패널 너비와 높이 가져오기 var PanelWidth=parseInt(FramePanel.style.width.replace("px","")); 🎜>var PanelHeight=parseInt(FramePanel.style.height.replace("px ","")); //마우스 좌표 가져오기 var MouseX=event.clientX var MouseY=event .clientY;//웹 페이지 창의 너비와 높이 가져오기 var WindowWidth=document.body.offsetWidth; var WindowHeight=document.documentElement.offsetHeight; >=WindowWidth) { x=MouseX-PanelWidth-20; } else { x=MouseX; // 마우스 Y 좌표 패널 높이>웹 페이지 창 높이, 그러면 패널 상단에 if((MouseY PanelHeight)>=WindowHeight) { y=MouseY-PanelHeight-20>이 표시됩니다. } else { y=MouseY; } //디스플레이 패널 FramePanel.style.left=x; 🎜>FramePanel.style.display="block"; //보조 메뉴 숨기기 document.getElementById("ChildDiv").style.display="none" return false;// 코드는 event.returnValue=false와 같습니다. } //마우스는 메뉴를 선택합니다. 매개변수 설명: arg는 메뉴 Div, imageUrl은 대체할 이미지 주소를 참조하고, hasChildMenu는 메뉴 여부를 참조합니다. 하위 메뉴가 있는 경우 childPanelId는 하위 메뉴 ID를 참조합니다(하위 메뉴가 있는 경우) function MenuOnMouseOver(arg,imageUrl,hasChildMenu,childPanelId) { //배경 이미지 교체(이미지 경로는 상대 경로) arg.style.BackgroundImage= "url('" imageUrl "')" //div 배경 색상 변경 arg.style.BackgroundColor="#1665CB" //글꼴 색상 변경 arg.style.color ="#ffffff"; //이 메뉴 아래에 하위 메뉴가 있는 경우 if(hasChildMenu) { //만들기 메뉴가 나타나는 좌표인 두 개의 변수 var x; var y //하위 메뉴 Div 가져오기(이하 하위 패널이라고 함) var ChildPanel=document.getElementById(childPanelId) ; //debugger; //하위 패널의 너비와 높이를 가져옵니다. var ChildPanelWidth=parseInt(ChildPanel.style.width.replace("px","")); ChildPanelHeight=parseInt(ChildPanel.style.width.replace("px","") ); //상위 메뉴 Div 가져오기(이하 상위 패널이라고 함) var FramePanel=event.srcElement; //상위 패널의 너비와 높이 가져오기 var PanelWidth=FramePanel.offsetWidth; var PanelHeight=FramePanel.offsetHeight; //마우스 좌표 가져오기 var MouseX=event .clientX; var MouseY=event.clientY; //상위 패널에서 마우스 오프셋 위치 가져오기 var MouseOffsetWidth=event.offsetX; var MouseOffsetHeight=event.offsetY; //웹 페이지 창의 너비와 높이를 가져옵니다 var WindowWidth=document.body.offsetWidth; var WindowHeight=document .documentElement.offsetHeight //마우스 x=MouseX; -MouseOffsetWidth-ChildPanelWidth-3; } else { x=MouseX-MouseOffsetWidth PanelWidth-5; } //마우스 Y 좌표 패널 높이>웹페이지 창 높이이면 패널 상단에 if((MouseY-MouseOffsetHeight ChildPanelHeight)>=WindowHeight-30) { y=MouseY-MouseOffsetHeight-ChildPanelHeight-15 } else { y=MouseY-MouseOffsetHeight 5; } //디스플레이 패널 ChildPanel.style.left=x ChildPanel.style.top= y; ChildPanel.style.display="block"; } } //마우스가 메뉴를 종료합니다 function MenuOnMouseOut(arg,imageUrl,hasChildMenu,childPanelId) { if(hasChildMenu) { //하위 메뉴 div(이하 하위 패널) var ChildPanel=document.getElementById(childPanelId) var ToElement=event.toElement; // 이때 마우스가 하위 패널의 하위 div로 이동할 수 있다는 점에 유의하세요. event.ToElement!=ChildPanel(하위 패널), event.ToElement.parentNode=ChildPanel, if(ToElement= =ChildPanel||ToElement.parentNode==ChildPanel) { ChildPanel.style.display="block"; } else { ChildPanel. style.display=" none"; } } //배경 이미지 교체(이미지 경로는 상대 경로입니다) arg.style.BackgroundImage="url('" imageUrl " ')"; / /div 배경 색상 변경 arg.style.BackgroundColor="#ffffff"; //글꼴 색상 변경 arg.style.color="#000000"; } < /script> 페이지 ASPX 코드는 다음과 같습니다.