메뉴 건너뛰기

조회 수 266 댓글 1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onmouseover과 onmouseout</title>
<script>
var text=["빨간자전거를 타고 서울, 대전, 대구, 부산 찍고, 목포, 인천을 거쳐 달린다",
          "한국 고전 50권, 외국 고전 50권을 읽는 목표",
          "아침에는 수영을 배우고, 점심먹고 자전거 훈련 30KM, 저녁에는 10KM 달리기 하기",
          "문제가 많고 잘 정리된 자바스크립트 책을 구입하여 본격적으로 연습문제 풀기"];
var commentDiv;

function init() {
    commentDiv = document.getElementById("commentDiv");    

    var liArray = document.getElementsByTagName("li");
    for(i=0; i<liArray.length; i++) {
        liArray[i].addEventListener("mouseover", over, false);
        liArray[i].addEventListener("mouseout", hideCommentDiv, false);    
    }
}

function over(e) {
    var n=0;
    switch(e.target.id) {
        case "l0" : n = 0; break;
        case "l1" : n = 1; break;
        case "l2" : n = 2; break;
        case "l3" : n = 3; break;
    }
    setCommentDiv(text[n], e);    
}

function setCommentDiv(comment, e) {
    commentDiv.innerHTML = comment;
    commentDiv.style.left = e.clientX + "px"; //여기서 왜 clientX로 한것이죠? offsetX가 맞지않나요?? 그리고 left의 기준이 어디서부터 왼쪽방향으로 얼마만큼 떨어져있는지 기준이 궁금합니다
    commentDiv.style.top = e.clientY + "px"; //여기도 왜 clientY인지, top은 어디를 기준으로 몇픽셀떨어져있는것을 의미하는지 여쭤보고싶습니다. 
    commentDiv.style.border = "1px solid yellowgreen";
    commentDiv.style.background = "aliceblue";
    commentDiv.style.visibility = "visible";
    
}

function hideCommentDiv() {
    commentDiv.style.visibility = "hidden";
}

</script>
</head>
<body onload="init()">
<h3>아이템에 마우스를 올리면 설명 출력</h3>
<hr>
<p>여름 방학 때 하고 싶은 것들</p>
<ul>
    <li id="l0">자전거로 대한민국 일주</li>
    <li id="l1">책 100권 읽기</li>
    <li id="l2">철인 3종 경기 준비</li>
    <li id="l3">자바스크립트 정복</li>
</ul> 
<div id="commentDiv" style="position:absolute"></div>
</body>
</html>
 

?
  • ?
    관리자 2019.08.22 14:03
    e.clientX , e.clientY는 마우스 커서가 있는 위치를 나타내는 픽셀 값인데, 브라우저에서 현재 출력된 문서의 윈도우를 기준으로 합니다.
    만일 이 값이 e.clientX , e.clientY 100, 200 이라면 이것은 현재 마우스 커서기가 있는 위치가 문서가 출력된 윈도우의 왼쪽 상단 모서리를 0, 0 으로 봤을 때의 상대거리로 100, 200 떨어져 있는 위치입니다.
    마우스가 있는 바로 그 위치인겁니다.
    그런데 e.offsetX , e.offsetY 는 이벤트가 발생한 객체 li를 기준으로 (li의 위치를 0,0으로 봤을 때) 계산된 값입니다.
    그러므로 현재 마우스가 있는 곳에 div 객 체를 출력하려면 e.clientX , e.clientY를 사용해야겠지요.

    그리고 left, top은 객체의 pisition ㅇ리라는 배치 종류에 따라 달라질 수 있습니다. (217페이지 참고)
    보통의 경우 left는 문서가 출력된 영역의 왼쪽 끝이 0인 상대값이고, top은 최상단을 0으로 한 상대값입니다.

QnA

공부하면서 궁금했던 것을 질문해보세요.

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.21 18152
181 테스트 관리자 2019.08.30 169
180 게시판QnA질문입니다. 4 file asdf 2019.08.30 182
179 교재 468page 실습문제 2-2번 질문입니다. 3 세린 2019.08.24 255
178 10장 window.open 질문입니다. 1 멍청이 2019.08.23 376
177 432PAGE 9장 실습문제 9번 재질문올립니다. 2 asdfSDF 2019.08.23 154
176 465page 오픈챌린지10장 질문입니다. 2 asdf 2019.08.23 413
» 432페이지 9장 실습문제9번 질문입니다. 1 asdf 2019.08.22 266
174 425페이지 오픈챌린지09번 질문입니다. 1 멍청이 2019.08.22 176
173 교재425page 9장 오픈챌린지 질문입니다. [재수정해서 올립니다.] 3 ㅁㄴㅇㄻㄴㅇㄹ 2019.08.21 769
172 교재 413page 질문입니다. 1 ㅁㅇㄻㄴㅇㄹ 2019.08.20 98
171 교재403page 예제9-8 코드 질문입니다. 1 asdf 2019.08.19 101
170 385p 8장 실습문제 07번 질문입니다. 1 12345 2019.08.16 615
169 384page 8장 실습문제5번 질문입니다. 6 1234 2019.08.16 436
168 377page 8장 오픈챌린지 질문입니다.(다시 질문 올립니다.) 2 멍청이 2019.08.15 359
167 361page 예제 8 -2 질문입니다. 1 ㅁㄴㅇㄻㄴㅇㄹ 2019.08.14 67
166 책 151p 3장 오픈챌린지 문제질문입니다. 3 이상민 2019.07.19 232
165 배경슬라이드가 뭔지 추가설명하겠습니다 2 hansung 2019.06.27 92
164 423쪽, 예제9-20 1 사랑나눔 2019.06.27 118
163 자바스크립트로 배경이미지슬라이드 만들어볼려고 열심히 노력하는데 1 hansung 2019.06.24 219
162 5장 연습문제 홀수 번 질문 1 채XX 2019.06.17 1985
목록
Board Pagination Prev 1 ... 7 8 9 10 11 12 13 14 15 16 ... 21 Next
/ 21
위로