728x90
반응형
자바스크립트 이벤트 마무리 문제(1)
책 : 모던 자바스크립트 프로그래밍의 정석 220페이지 참고
마무리 문제 1
- 문서에는 하나의 이미지가 삽입되어 있습니다. 이 이미지의 위에 마우스 포인터를 올려놓았을 때 다른 이미지로 바뀌었다가 이미지에서 마우스 포인터를 다른 곳으로 이동하면 다시 원래의 이미지로 바뀌는 소스를 작석해 보세요.
길라잡이
- 문서에서 <img> 태그에는 id나 class가 없습니다. 태그 이름을 사용하거나 2개 이상의 선택자를 연결한 후 이미지를 가져와서 변수에 저장합니다.
- 마우스 포인터를 이미지의 위에 올려놓을 때는 mouseover 이벤트가, 마우스 포인터를 다른 곳으로 이동할 때는 mouseout 이벤트가 발생합니다.
- 이벤트가 발생했을 때 이미지의 src 속성값을 바꿉니다.
코드 블럭
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>finalQestion01</title>
<style>
* {
margin: 0;
padding: 0;
}
.section {
margin: 0 auto;
width: 1200px;
text-align: center;
}
.section h1 {
margin: 20px;
}
</style>
</head>
<body>
<section class="section">
<h1>마우스 오버하면 이미지 바꾸기</h1>
<img src="img/finalQuestion01_01.jpg" alt="이미지">
</section>
<script>
let img = document.querySelector(".section img");
img.addEventListener("mouseover", () => {
img.src= "img/finalQuestion01_02.jpg"
});
img.addEventListener("mouseout", () => {
img.src= "img/finalQuestion01_01.jpg"
});
</script>
</body>
</html>
구성
- body 태그에 img 태그를 만들어 처음 이미지를 입력해줍니다.
- style 태그로 이동해서 각 스타일을 입력해줍니다.
- script 태그로 이동해서 이미지를 선택자를 만들어줍니다.
- 마우스 오버했을 때 선택자에 이벤트 메서드인 addEventListener("mouseover") 했을 때 변경할 이미지를 이미지의 src 속성에 입력해줍니다.
- 마우스 아웃했을 때 선택자에 이벤트 메서인 addEventListener("mouseout") 했을 때 다시 원래의 이미지를 가져오게끔 src 속성의 이미지를 다시 입력해줍니다.
참고
- 이벤트 메서드
| 메서드 | 설명 |
| addEventListener("mouseover") | 요소 위에 포인터 요소 위치가 있을 때 |
| addEventListener("mouseout") | 요소 위에 포인터 요소 위치가 벗어 났을 때 |
728x90
반응형
