메뉴 건너뛰기

조회 수 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 18177
302 9장 연습문제 4번 1 초보 2020.10.16 1007
301 303p. 12번에 2질문 드립니다 1 2020.10.15 96
300 302p. 7번에 (2)번 문제 2020.10.15 73
299 264p 문의 1 . 2020.10.15 65
298 282p. 예제 6-14 출력 문의 드려요 1 file . 2020.10.15 82
297 z-index 관련 질문 번역봇 2020.10.13 63
296 2장 인라인프레임만들기 예제 2-24 다시질문해요 2 고수가되고싶어요 2020.10.11 89
295 실습 문제 4장 4번 문제에 대해서 질문드립니다. 1 ㅇㅇ 2020.10.11 121
294 2장 인라인프레임만들기 예제 2-24 file 고수가되고싶어요 2020.10.10 75
293 연습문제 5장 10번 문제 질문드립니다. 1 . 2020.10.08 246
292 실습문제 5장 9번 1 file 2020.10.08 211
291 연습문제 3장 p.155 5번 문제 1 열심히해보자 2020.10.07 412
290 연습문제 4장 8번문제 1 file 도라에몽 2020.10.02 252
289 실습문제 4장 8번 1 2020.09.27 449
288 이거 1장 부터 시작해서 답을 어디서 확인해야 되죠? 2020.09.27 222
287 6장 실습문제 2번 3번문제 초보 2020.09.16 146
286 p.583 4번 질문드립니다. 6 열심히 공부하는 독자 2020.09.14 287
285 p.524 쿠키 질문드립니다. 2 열심히 공부하는 독자 2020.09.12 71
284 예제 13-9 질문드립니다. 4 열심히 공부하는 독자 2020.09.12 100
283 page 46 마우스 올릴시 이미지 출력 2 file 공부중 2020.09.10 318
목록
Board Pagination Prev 1 ... 2 3 4 5 6 7 8 9 10 ... 21 Next
/ 21
위로