관리 메뉴

nkdk의 세상

JS :: 마우스커서를 따라다니는 이미지 본문

My Programing/HTML and JavaScript

JS :: 마우스커서를 따라다니는 이미지

nkdk 2008. 6. 16. 10:26

  • event객체
    이벤트를 처리하기위해 사용됩니다.
    • clientX : 마우스커서의 x좌표를 반환합니다.
    • clientY : 마우스커서의 y좌표를 반환합니다.
  • body객체
    body안의 태그를 처리하기위해 사용됩니다.
    • scrollTop : 종스크롤의 이동값을 반환합니다.
    • scrollLeft : 횡스크롤의 이동값을 반환합니다.

  • visibility : 화면상에 출력할 지를 설정합니다.
    • visible : 출력합니다.
    • hidden : 숨깁니다.
  • pixelTop : 해당태그의 x좌표를 설정합니다.
  • pixelLeft : 해당태그의 y좌표를 설정합니다.

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

function gif_image() {
dsp_image.style.visibility = 'visible';
dsp_image.style.pixelTop = event.clientY + document.body.scrollTop - 15;
dsp_image.style.pixelLeft = event.clientX + document.body.scrollLeft + 15;
}

document.onmousemove = gif_image;

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

<div id="dsp_image" style="width:32; height=32; position:absolute;
visibility:hidden;">
<img src="ico_fc_star.gif">
</div>

</body>
</html>