메뉴 건너뛰기

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 18266
402 span과 text-align : center; 에 관한 문제입니다. file 2019.10.15 279434
401 11장 6번 으엉 2019.11.27 187545
400 placeholder속성 1 khl 2017.04.08 85710
399 11장 6번 1 mj 2018.11.29 67531
398 실습문제 8-2 (3) 13412 2018.11.08 14699
397 웹 프로그래밍 책 답안지 1 mumu 2017.03.06 14071
396 살다 살다 답을 반쪽만 주는 책은 처음입니다 1 음음 2019.01.24 8845
395 Open Challenge 와 실습문제 자료 2 김원상 2017.04.29 7446
394 14장 예제 사라진 건가요 1 ... 2021.03.09 4077
393 localhost 관련 문의 3 소년정 2018.02.20 4036
392 페이지 247 에 있는 Open Challenge 05 의 CSS3로 태그 배치하기를 공부하고 있는데 질문드립니다. 1 file 워니고 2018.03.28 3874
391 ㅠㅠ..질문좀 드리겠습니다.. 1 은성 2017.04.18 3835
390 연습문제 답안지 2 vdncnck 2017.03.28 3262
389 짝수번 정답 3 idididid 2017.12.24 3128
388 8장 연습문제 실습문제 4장 2 student 2017.05.08 2869
387 10장 오픈챌린지 5 은성 2017.04.07 2247
386 open challenge 05 2 hardworking 2017.03.29 2223
385 5장 연습문제 홀수 번 질문 1 채XX 2019.06.17 1997
384 HTML을 열심히 공부중인 학생입니다 3 열심히 하자 2018.05.30 1962
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 21 Next
/ 21
위로