[JAVASCRIPT] 마우스를 오버하면 바뀌는 그림

무근본 일반인 2023. 3. 31. 03:14

2023. 3. 31. 03:14

728x90

완성 화면

코드 보기 ver. 1

<!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>연습문제 1</title>  
  <style>
    #container {
      width: 600px;
      margin: 20px auto;
    }
    h1 {
      font-size:1.5rem;
      text-align:center;
      margin-bottom:20px;
    }
    .img {
        cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="container">
    <h1>마우스 오버하면 이미지 바꾸기</h1>
    <img class="img"src="pic-1.jpg" alt="">
  </div>

  <script>
    const imgChange = document.querySelector(".img")

    imgChange.addEventListener("mouseover", ()=>{
        imgChange.src = "pic-6.jpg";
    });
    imgChange.addEventListener("mouseout",()=>{
        imgChange.src = "pic-1.jpg";
    });
  </script>
</body>
</html>

HTML 코드

: 이미지를 포함하는 div 요소가 있다.

이 요소의 id는 container이며, css에서 스타일링 시 이 id를 기준으로 선택할 수 있다.

또한 이 div 요소 안에는 이미지를 표시하는 img 요소가 있으며, 이 img 요소는 "img"라는 클래스가 저장되어 있다.

CSS 코드

: #container 요소에 스타일링을 적용하고 있다.

이 요소의 너비(width)를 600px로 지정하고, margin 속성을 사용하여 수평 중앙 정렬을 적용한다.

h1 요소는 글자 크기가 1.5em으로 가운데 정렬되며, 하단에 20px의 마진이 적용된다.

img 클래스가 지정된 img 요소에는 cursor 속성이 포인터로 지정되어 있다.

이 스타일은 마우스를 올리거나 요소를 클릭했을 때 커서의 모양을 변경하는데 사용된다.

JAVASCRIPT

: document.querySelector( ) 함수를 사용하여 img 요소를 선택한다.

이 함수는 CSS 선택자를 이용해 요소를 선택할 수 있다.

.img 라는 클래스 선택자를 사용하여 img 요소를 선택한다.

선택한 img 요소에 대해 mouserover이벤트와 mouseout 이벤트가 각각 등록된다.

mouseover 이벤트는 마우스가 요소 위로 진입하면 발생하며, mouseout 이벤트는 마우스가 요소를 벗어나면 발생한다.

이벤트 발생 시 실행될 콜백 함수는 화살표 함수로 작성되어 있으며, 이 함수는 각각 imgChange.scr 속성을 변경하는 구문을 포함한다.

마우스가 요소 위로 진입하면 imgChange.scr를 pic-6.jpg로 변경하고, 마우스가 요소를 벗어나면 imgChange.scr 속성을 pic-1.jpg로 변경한다.

코드 보기 ver. 2

<!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>연습문제 1</title>  
  <style>
    #container {
      width: 600px;
      margin: 20px auto;
    }
    h1 {
      font-size:1.5rem;
      text-align:center;
      margin-bottom:20px;
    }
    .img {
        background-image: url(pic-1.jpg);
        cursor: pointer;
        width: 600px;
        height: 300px;
    }
    .img:hover {
        background-image: url(pic-6.jpg);
    }
  </style>
</head>
<body>
  <div id="container">
    <h1>마우스 오버하면 이미지 바꾸기</h1>
    <div class="img"></div>
  </div>
</body>
</html>

HTML

: ver. 1 코드와 비슷하지만 이미지를 img 태그 대신 div 태그의 배경 이미지로 표시하는 방법을 사용한다.

이 방법은 원래 이미지와 대체 이미지를 모두 div 태그의 배경 이미지로 지정하고, 마우스 오버 시 CSS에서 이 배경 이미지를 변경하여 이미지를 교체하는 방식으로 동작한다.

div 요소에 img라는 클래스가 지정되어 있다.

CSS에서 이 클래스를 선택하여 해당 div 요소의 스타일을 지정할 수 있다.

CSS

: img 클래스를 가진 div 요소의 배경 이미지는 background-image 속성으로 지정되며, cursor 속성은 포인터로 변경한다.

div 요소의 너비(width)와 높이(height)는 각각 600px,300px로 지정된다.

CSS에서는 img:hover 선택자를 이용하여 마우스 오버 시의 스타일을 지정한다.

img:hover 에서는 배경 이미지를 기존 이미지인 pic-1.jpg에서 다른 이미지인 pic-6.jpg로 변경한다.

이렇게 작성된 코드는 마우스를 div 요소 위로 올리면 배경 이미지가 교체되며, 마우스가 요소를 벗어나면 다시 원래 이미지로 돌아간다.

ver.1처럼 JAVASCRIPT를 사용하지 않기 때문에 대상 요소가 div와 같은 특정 태그로 제한된다는 단점이 있으나,

코드가 간단하고 브라우저에서의 성능 문제가 적다는 장점이 있다.

Fiat Lux