Notice
Recent Posts
Recent Comments
Link
«   2025/06   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

nkdk의 세상

JS :: 이동가능한 도움말창 생성 본문

My Programing/HTML and JavaScript

JS :: 이동가능한 도움말창 생성

nkdk 2008. 6. 16. 10:28

마우스클릭 관련 이벤트

  • onclick : 마우스로 클릭시 이벤트를 수행합니다.
  • onmouseup : 마우스의 좌우상관없이 클릭시 이벤트를 수행합니다.
  • onmousedown : 마우스의 좌우상관없이 버튼을 누른 상태에서 이벤트를 수행합니다.
  • ondblclick : 마우스로 더블클릭시 이벤트를 수행합니다.
  • ondragdrop : 특정영역을 마우스로 끌어다 놓으면 이벤트를 수행합니다.

마우스커서 관련 이벤트

  • onmousemove : 마우스커서가 이동시 발생됩니다.
  • onmouseover : 마우스커서가 특정영역에 위치했을 때 발생됩니다.
  • onmouseout : 마우스커서가 특정영역을 벗어났을 때 발생됩니다.

키보드 관련 이벤트

  • onkeydown : 키보드의 키를 눌렀을 때 발생됩니다.
  • onkeypress : 키보드의 키를 눌렀을 때 발생됩니다. 이벤트를 계속 호출/수행합니다.
  • onkeyup : 키보드의 키를 눌렀다가 떼었을 때 발생됩니다.

마우스/키보드와 관련된 이벤트핸들러는 ..

함수내부에 위치한다해도 변수와 같이 독자적인 값을 갖습니다. 해당 이벤트핸들러의 조건을 만족시키면 설정된 이벤트를 발동합니다.
"<a href="#""는 링크기능은 수행하지 않으나 해당영역에 위치시 [링크선택]커서를 나타내기 위해서 사용됩니다.

<html>
<script language="JavaScript">
<!--

var move_x, move_y, temp_x, temp_y;

function mouse_dragdrop() {  // 공지사항의 신좌표를 설정합니다.
if (event.button == 1 && flag_drag == 'true') {
  img1.style.pixelLeft = temp_x + event.clientX - move_x;
  img1.style.pixelTop = temp_y + event.clientY - move_y;
}
}

// 공지제목을 드래그하면 각좌표값을 저장, 공지사항의 신좌표를 설정하는 함수를 호출
function mouse_drag() {   temp_x = img1.style.pixelLeft;
temp_y = img1.style.pixelTop;
move_x = event.clientX;
move_y = event.clientY;

document.onmousemove = mouse_dragdrop;  // 함수내부에서도 독자적으로 값을 갖음.
flag_drag = 'true';
}

function mouse_up() {  // 배경(Document)클릭시 "공지사항"이 움직이는 것을 방지
flag_drag = 'false';
}

document.onmouseup = mouse_up;

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

<div id="img1" style="width=170px; position:absolute; left:120px; top:40px; visibility:hidden; z-index:1; border:1px #ffddcc solid;">
<table cellpadding=3 cellspacing=0 style="font-size:9pt">
<tr bgcolor="#aaccdd">
  <td align="center" onmousedown="mouse_drag()"><b>:: 공지사항 ::</b></td>
</tr>
<tr bgcolor="#ffddaa">
  <td>제목을 클릭하여 창의 위치를 이동할 수 있습니다.</td>
</tr>
</table>
</div>
<a href="#" onclick="img1.style.visibility='visible';">
이 곳을 클릭하면 공지가 나타납니다.
</a>

</body>
</html>

'My Programing/HTML and JavaScript' Related Articles more