풍선도움말...

호가계부를 시작페이지로

은행 카드 증권 보험 부동산

     
My 즐겨찾기 수정
[무료]  오늘의 운세  /  바이오리듬
여기는 회원님이 직접 등록하신
즐겨찾는 사이트가 출력됩니다.
컴퓨터와 관련있는 모든 팁을 공유합시다.

말풍선 위치 계산 (마우스 포인터 위치계산)

호가계부|2019-01-14 15:47:11|조회 : 1351
웹프로그램을 제작하다보면 마우스 포인터가 위치하는 곳에 도움말을 제공하는 기능을 만들때가 있습니다.

이때 중요한 것은 마우스 포인터의 위치를 알아내는 것인데, 스크롤바가 없을때는 쉽게 알아낼수 있는데, 스크롤바가 있을때는 각 브라우저마다 알아내는 구문이 달라서 애로를 격습니다.

우선 스크롤 바가 없을때는 자바스크립트에서 event.clientX, event.clientY 해서 X 값과 Y 값을 알수 있습니다.

그렇지만 스크롤바가 생길경우에는 스크롤바가 움직인 거리를 추가적으로 더해줘야 합니다.
그런데 브라우저 마다 구문이 틀려서 저는 다음과 같이 사용합니다.

// 익스플로로, 크롬, 사파리 일때와 그렇지 않을때로 구분
if ( navigator.appName == 'Netscape') {
var scrolltop = document.documentElement.scrollTop;
var clientheight = document.documentElement.clientHeight;
var scrollwidth = document.documentElement.scrollWidth;
var clientwidth = document.documentElement.clientWidth;
} else {
var scrolltop = document.body.scrollTop;
var clientheight = window.innerHeight;;
var scrollwidth = document.body.scrollWidth;
var clientwidth = document.body.clientWidth;
}

scrolltop : 스크롤이 상하로 움직인 거리
scrollwidth : 스크롤이 좌우로 움직인 거리
clientheight : 웹브라우저 내부의 높이
clientwidth : 웹브라우저 내부의 가로

그래서 마우스 포인터의 X 값은 scrollwidth + event.clientX 이고
마우스 포인터의 Y 값은 scrolltop + event.clientY 입니다.





TAG : javascript  scrollTop  scrollWidth  clientHeight  clientWidth  innerHeight  clientX  clientY 



번호 제             목 첨부 작 성 일 작성자 조회
94  

컴퓨터 종료시간 예약하기

2019-03-22 호가계부 532
93  

말풍선 위치 계산 (마우스 포인터 위치계산)

  2019-01-14 호가계부 1352
92  

[Javascript] 날짜 유효성 검사

  2018-09-13 호가계부 1297
89  

MySql 기존 컬럼에 자동증가 속성 변경, 추가 및 초기화

  2018-08-15 호가계부 7725
88  

CSS 반응형 레이아웃 만들기

2018-07-25 호가계부 4315
87  

CSS로 글자 자르기 및 말줄임 표시 하기

  2018-07-24 호가계부 2900
86  

홈페이지 팝업창 화면 가운데 출력하기

  2018-07-12 호가계부 2360
83  

URL 최대길이

  2015-06-16 호가계부 6697
82  

공공저작물 자유이용 사이트

  2015-06-16 호가계부 8412
81  

저작권 문제없는 무료 이미지 사이트

  2014-11-07 호가계부 14252
80  

[JavaScript] 연관배열

  2014-10-25 호가계부 5778
79  

[JavaScript] typeof 문 사용방법

  2014-10-25 호가계부 6941
78  

[JavaScript] try catch문 사용방법

  2014-10-25 호가계부 8192
77  

Internet Exploer 11 시작페이지로 등록 문제

  2014-10-25 호가계부 8025
76  

[엑셀] 숫자 천단위 기호 표시하는 함수

  2014-10-09 호가계부 8112
75  

IE 문서모드

  2014-08-11 호가계부 11622
74  

javascript 에서 window.onload() 와 window::onload() 비교

  2014-07-23 호가계부 4291
73  

3DP Chip은 드라이버를 쉽게 찾아주고 3DP Net은는 랜카드통합 ...

  2014-07-16 호가계부 8173
72  

android:theme="@android:style/Theme.Dialog" 에러가 날때

  2014-07-12 호가계부 7267
71  

javascript로 HTML5 에서 재공하는 Placeholder 기능을 구현한다...

2014-07-03 호가계부 8012
처음으로 앞으로 | [1] 2 3 4 5 | 다음 마지막