JavaScript로 이미지 위에 마우스 커서를 손가락 모양으로 바꾸기

웹 페이지를 디자인하다 보면 이미지 위에 마우스 커서를 손가락 모양으로 바꾸는 것이 사용자 경험을 향상시키는 중요한 요소 중 하나입니다. 이 글에서는 JavaScript를 사용하여 이미지 위에 마우스 커서를 손가락 모양으로 변경하는 방법을 알아보겠습니다.

1. CSS로 커서 스타일 설정하기

우선, 이미지 위에 마우스 커서 스타일을 설정해야 합니다. 이를 위해 CSS를 사용합니다.

.hand-cursor {
    cursor: pointer; /* 마우스 커서를 손가락 모양으로 변경 */
}

위 CSS 코드에서 cursor 속성을 pointer로 설정하여 마우스 커서를 손가락 모양으로 변경합니다.

2. HTML 이미지 요소와 클래스 추가하기

이제 HTML에서 이미지를 정의하고 해당 이미지에 커서 스타일을 적용할 클래스를 추가합니다.

<img src="your-image.jpg" alt="이미지 설명" class="hand-cursor">

위 코드에서 이미지는 <img> 요소로 정의되며, class 속성에 hand-cursor 클래스를 추가하여 마우스 커서 스타일을 적용합니다.

3. JavaScript로 이미지에 클래스 추가하기

이미지 위에 마우스를 올렸을 때 손가락 모양의 커서를 표시하기 위해 JavaScript를 사용합니다. 이를 위해 mouseover 이벤트 리스너를 추가합니다.

const image = document.querySelector('img.hand-cursor');

image.addEventListener('mouseover', function() {
    image.classList.add('hand-cursor');
});

image.addEventListener('mouseout', function() {
    image.classList.remove('hand-cursor');
});

위 코드에서 mouseover 이벤트가 발생하면 hand-cursor 클래스를 이미지에 추가하고, mouseout 이벤트가 발생하면 해당 클래스를 제거합니다.

4. 예시 코드

이제 위에서 설명한 개념을 사용하여 이미지 위에 마우스 커서를 손가락 모양으로 변경하는 예시 코드를 살펴보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>마우스 커서 손가락 모양으로 변경</title>
    <style>
        .hand-cursor {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <img src="your-image.jpg" alt="이미지 설명" class="hand-cursor">

    <script>
        const image = document.querySelector('img.hand-cursor');

        image.addEventListener('mouseover', function() {
            image.classList.add('hand-cursor');
        });

        image.addEventListener('mouseout', function() {
            image.classList.remove('hand-cursor');
        });
    </script>
</body>
</html>

위 코드는 HTML 이미지를 정의하고 JavaScript를 사용하여 이미지 위에 마우스 커서를 손가락 모양으로 변경합니다.

끝으로

JavaScript를 사용하여 이미지 위에 마우스 커서를 손가락 모양으로 바꿀 수 있습니다. CSS를 사용하여 커서 스타일을 설정하고, JavaScript를 사용하여 이벤트 리스너를 추가하여 마우스를 이미지 위로 가져갔을 때 커서 스타일을 변경할 수 있습니다. 이를 통해 웹 페이지의 사용자 경험을 개선하고, 이미지를 클릭할 수 있음을 사용자에게 시각적으로 나타낼 수 있습니다.

▼ 아래 글도 읽어보세요! ▼

JavaScript 배열 메소드 forEach() 쉽게 배우기 - 예시 코드 제공

JavaScript 배열 메소드 forEach() 쉽게 배우기- 예시 코드 제공 JavaScript는 다양한 배열 메소드를 제공하여 배열의 요소를 조작하고 처리할 수 있게 해줍니다. 이번 글에서는 그 중에서도 forEach() 메소

lemonlog.tistory.com

JavaScript 배열 메소드 find() 쉽게 배우기 - 예시 코드 제공

JavaScript 배열 메소드 find() 쉽게 배우기 - 예시 코드 제공 JavaScript에서 배열을 조작하고, 배열 내에서 원하는 조건을 충족하는 요소를 검색할 때 find() 메소드는 매우 유용한 도구입니다. 이 글에

lemonlog.tistory.com

'Programming & Platform > JavaScript' 카테고리의 다른 글

부트스트랩 달력 특정일자 비활성화 하는 방법 bootstrap datepicker (0)	2023.12.15
JavaScript 콜백함수 사용법, 콜백 지옥, 에러 처리, 관련 소스 코드 (0)	2023.12.13
JavaScript 페이지 새로고침 후 검색 입력란에 커서 자동 위치시키기 (0)	2023.12.10
JavaScript Enter 누를 때 검색 기능 로직 - 활용 소스 코드 제공 (0)	2023.12.09
JavaScript yarn SyntaxError: missing ) after argument list 해결 (1)	2023.12.07

JavaScript로 이미지 위에 마우스 커서를 손가락 모양으로 바꾸기