메뉴 건너뛰기

2021.05.31 16:12

6장 예제 6-2 질문

조회 수 169 댓글 1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>script 태그에 자바스크립트 작성</title>
<script>
function over(obj) {
    obj.src="media/banana.png";
}
function out(obj) {
    obj.src="media/apple.png";
}

</script>
</head>
<body>
<h3>마우스 올려 보세요</h3>
<hr>
<img src="media/apple.png" alt="이미지"
        onmouseover="over(this)"
        onmouseout="out(this)">
</body>
</html>

 

///////////////////////////////////////////////////

책에 나와있는 예제 6-2의 코드입니다.

이미 사과 이미지를 배치했는데

왜 따로 function out(obj) {
    obj.src="media/apple.png";} 
를 주어야 하는가요? 

빨간색 부분의 코드를 지워도 결과는 똑같은데 무슨 차이, 이유가 있는건가요?

 

공부하다가 궁금해서 질문합니다!!

?
  • ?
    관리자 2021.05.31 18:59
    out() 함수는 이미지에서 마우스를 다른 곳으로 이동시키면 발생하는 MOUSE OUT 이벤트를 처리하는 함수입니다.
    만일 out() 함수가 없다면, 마우스를 이미지 위에 올려 바나나가 출력되고 그 후 마우스를 다른 곳으로 옮겨도 사과 이미지로 돌아오지 않습니다.
    out()은 마우스를 다른 곳으로 옮겼을 때 이미지 태그에 사과를 출력하기 위한 것입니다.

    이 예제의 목적은 MOUSE OVER 이벤트와 MOUSE OUT 이벤트의 발생을 확인하는데 있습니다.
    혹시 이 대답이 부족하거나 질문자의 의도를 제가 잘 이해못하였다면
    다시 질문 주세요.

QnA

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

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.20 18241
343 몽구스 웹서버가 작동 안됩니다. 바울 2021.07.22 148
342 9 - 15 코드 개선 질문있습니다. 1 killchain 2021.06.17 130
341 6장 실습문제 4번 1 김성준 2021.06.16 255
340 6장 OPEN challenge 1 초보 2021.06.09 291
339 9장 실습문제 10번 질문이요 2 mmii 2021.06.06 203
» 6장 예제 6-2 질문 1 릴릴 2021.05.31 169
337 교과서 13장 연습문제 1 알고싶어요 2021.05.29 552
336 이벤트 흐름 1 궁금이 2021.05.28 99
335 8장 실습문제 8번 질문이요! 4 mmii 2021.05.28 286
334 14장 소스코드 제공에 대해 질문합니다. 1 질문자 2021.05.25 175
333 10장 예제 10-8에 오류가 있습니다. 1 file 삼오칠 2021.05.22 289
332 9장 예제 9-10질문입니다. 2 file 삼오칠 2021.05.14 365
331 6장 openchallenge 1 ㅇㅇ 2021.05.06 245
330 명품 수정판 HTML5+ CSS3+ Javascript 웹 프로그래밍 p.74 메타 데이터 <meta> 문의 1 mikael 2021.05.06 113
329 오류 - 6장 3.식과 연산자 - 비트 논리 연산 1 김성필 2021.04.27 138
328 4장 예제 4-17질문입니다. 1 file Escui 2021.04.22 145
327 [명품 html5+ css3+ javascript 웹 프로그래밍 수정판] 1장 실습문제 4번 질문합니다... 2 file 나능냐공도리 2021.04.17 904
326 명품 html5+ 수정판 p.89 예제 2-21 파일 다운로드 링크 만들기 실행 오류 문의 1 file mikael 2021.04.15 201
325 명품 HTML5+ 수정판 2장 4번 문제 문의 1 file mikael 2021.04.14 519
324 명품 html5+ css3+ javascript 웹 프로그래밍 수정판 문제 실행 오류 문의 1 file mikael 2021.04.14 1159
목록
Board Pagination Prev 1 ... 2 3 4 5 6 7 8 9 10 ... 21 Next
/ 21
위로