#CSS
- (background)-color
 └ menu : '화면배색'의 메뉴색상입니다.
 └ highlight : '화면배색'의 선택항목색상입니다.
- border
 └ buttonhighlight : 메뉴스타일로 입체적으로 나온 스타일입니다.
- line-height : 라인간격을 설정합니다. default는 1입니다.

#JavaScript
:: event객체 :: 이벤트를 처리합니다.
 └ srcElement : 이벤트가 발생한 객체를 반환합니다.
 └ getAttribute("속성") : 해당객체의 속성값을 반환/설정합니다.
 └ offsetX : 컨테이너를 기준으로 이벤트가 발생된 x좌표를 반환/설정합니다.
 └ offsetY : 컨테이너를 기준으로 이벤트가 발생된 y좌표를 반환/설정합니다.
 └ offsetParent : 해당 컨테이너를 가리킵니다.

사용자 삽입 이미지

소스코드<html>
<style type="text/css">
<!--

#popmenus {  // 팝메뉴스타일
 cursor : default;
 position : absolute;
 width : 100px;
 background-color : menu;
 line-height : 1.4;
 padding : 4px;
 border : 2 outset buttonhighlight;
 visibility : hidden;
}

#menuitems {  // 팝메뉴 항목 스타일
 padding-left : 15px;
 padding-right : 10px;
 font-size : 9pt;
}

// -->
</style>
<script language="JavaScript">
<!--

function show_menu() {  // 우측/하단 여분길이계산, 필요시 커서좌측/상단출력
 var rightedge = document.body.clientWidth - event.clientX;  // 우측여분
 var bottomedge = document.body.clientHeight - event.clientY;  // 하단여분

 if (rightedge < popmenus.offsetWidth) {  // 우측여분이 팝메뉴너비보다 작으면
  menuleft = document.body.scrollLeft + event.clientX - popmenus.offsetWidth;
  popmenus.style.left = menuleft;  // 커서x좌표에서 팝메뉴너비를 뺀 값을 팝메뉴x좌표로 할당
 } else {
  popmenus.style.left = document.body.scrollLeft + event.clientX;
 }

 if (bottomedge < popmenus.offsetHeight) {  // 팝메뉴의 y좌표를 할당한다.(위와동일)
  menutop = document.body.scrollTop + event.clientY - popmenus.offsetHeight;
  popmenus.style.top = menutop
 } else {
  popmenus.style.top = document.body.scrollTop + event.clientY;
 }

 popmenus.style.visibility = "visible";
 return false;
}

function hide_menu() {  // 팝메뉴숨김
 popmenus.style.visibility = "hidden";
}

function highlight() {  // 커서가 위치시 활성스타일로
 if (event.srcElement.id == "menuitems") {
  event.srcElement.style.backgroundColor = "highlight";
  event.srcElement.style.color = "white";

  window.status = event.srcElement.url;
 }
}

function lowlight() {  // 커서가 벗어나면 비활성스타일로
 if (event.srcElement.id == "menuitems") {
  event.srcElement.style.backgroundColor = "";
  event.srcElement.style.color = "black";
  window.status = "";
 }
}

function jumpto() {  // 항목클릭시 해당URL로 이동
 if (event.srcElement.id == "menuitems") {
  if (event.srcElement.getAttribute("target") == null)
   window.location = event.srcElement.url;
  else
   window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
  }
}

// -->
</script>
<body>

마우스 오른쪽 버튼을 클릭하면 팝업메뉴가 나타납니다.<br>
<div id="popmenus" onmouseover="highlight()" onmouseout="lowlight()" onclick="jumpto()">

<div id="menuitems" url="http://www.naver.com/" target="win" style="width:100%;">네이버</div>
<div id="menuitems" url="http://www.google.co.kr">구글</div>

</div>
<script language="JavaScript">
<!--

document.oncontextmenu = show_menu;
document.body.onclick = hide_menu;

// -->
</script>

</body>
</html>

'Web(웹) Study > Java Script' 카테고리의 다른 글

prototype.js  (0) 2008.03.10
Ajax 관련 링크들...  (0) 2008.02.27
자바 스크립트에서 HTTP 요청하기  (0) 2008.01.18
서서히, 천천히 나타나는 그림  (0) 2008.01.09
공개소스 웹 HTML 에디터..  (0) 2007.12.27

+ Recent posts

티스토리툴바