HOWTO · JavaScript
JavaScript에서 마우스를 가져갈 때 이미지 변경
포인터가 이미지에 들어오면 `src`를 바꾸고, 나가면 원래 소스로 복원하는 방법을 설명합니다. JavaScript 이벤트 리스너와 HTML 이벤트 핸들러를 다루며, jQuery `.hover()`를 사용하는 선택지도 소개합니다.
이 페이지의 내용
이미지에 포인터를 올렸을 때 이미지를 바꾸려면 원래 src를 저장하고, 포인터가 들어오면 호버 이미지를 지정한 다음 포인터가 나갈 때 저장해 둔 소스를 복원합니다. 새 코드를 작성할 때는 JavaScript 이벤트 리스너로 동작을 HTML에서 분리할 수 있습니다. 네이티브 onmouseover 및 onmouseout 속성도 사용할 수 있으며, jQuery의 .hover()는 페이지에 jQuery가 이미 로드된 경우에만 사용할 수 있습니다.
호버할 때 이미지가 바뀌는 방식
이미지 전환은 기존 <img> 요소의 src 속성을 바꾸는 방식으로 이루어집니다. 두 이미지의 경로를 모두 사용할 수 있게 준비하고, 포인터가 나간 뒤 처음 상태로 돌아오도록 원래 경로를 저장해 둡니다. 같은 동작은 mouseover 및 mouseout 리스너, 인라인 HTML 이벤트 핸들러 속성 또는 jQuery 콜백으로 구현할 수 있습니다.
포인터가 이미지에 들어오면 src를 호버 이미지로 바꾸고, 나가면 원래 src를 복원합니다.
이 다이어그램은 포인터가 들어올 때 이미지 소스가 바뀌고, 나가면 원래 소스로 복원되는 과정을 보여 줍니다.
mouseover 및 mouseout 이벤트 리스너로 호버할 때 이미지 바꾸기
브라우저 페이지 예제는 이 문서 번들에 포함된 이미지 두 개를 사용합니다. 원래 경로를 변수에 저장한 다음, 짝을 이루는 리스너로 이미지 소스를 바꿉니다. 이 코드는 브라우저에서 사용하는 정적 소스이며, 이 패킷에서는 실행되지 않았습니다.
이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.
<img
id="hover-demo"
src="change-image-hover-using-event-listeners.webp"
data-original-src="change-image-hover-using-event-listeners.webp"
data-hover-src="change-image-hover-using-onmouseover-and-onmouseout.webp"
alt="Abstract still life with a coral disc and teal geometric shapes"
>
<script>
const image = document.querySelector('#hover-demo');
const originalSrc = image.dataset.originalSrc;
const hoverSrc = image.dataset.hoverSrc;
image.addEventListener('mouseover', () => {
image.src = hoverSrc;
image.alt = 'Abstract still life with dark spheres and curved shapes in blue and orange';
});
image.addEventListener('mouseout', () => {
image.src = originalSrc;
image.alt = 'Abstract still life with a coral disc and teal geometric shapes';
});
</script>
선택자는 바꾸려는 이미지 요소와 일치해야 합니다. originalSrc를 한 번 저장해 두면 실수로 호버 이미지 경로를 복원하는 일을 피할 수 있습니다. mouseover 및 mouseout는 포인터가 자식 요소를 지날 때도 발생할 수 있습니다. 이미지 하나만 대상으로 할 때는 대체로 간단하지만, 더 넓은 상호작용 영역에는 mouseenter와 mouseleave가 더 적합할 수 있습니다.
이 예제를 실행해 보세요.
const image = { src: 'original.webp', handlers: {} };
image.addEventListener = (name, handler) => {
image.handlers[name] = handler;
};
const originalSrc = image.src;
const hoverSrc = 'hover.webp';
image.addEventListener('mouseover', () => {
image.src = hoverSrc;
});
image.addEventListener('mouseout', () => {
image.src = originalSrc;
});
image.handlers.mouseover();
console.log(image.src);
image.handlers.mouseout();
console.log(image.src);
hover.webp
original.webp
이 독립 실행형 Node.js 예제는 브라우저 DOM 없이 두 차례의 소스 변경을 보여 줍니다. 웹페이지에서는 핸들러를 실제 이미지 요소에 연결하고 해당 페이지를 기준으로 확인되는 경로를 사용하세요.
onmouseover 및 onmouseout HTML 속성 사용하기
네이티브 HTML 이벤트 핸들러 속성은 JavaScript 함수를 직접 호출할 수 있으며 jQuery가 필요하지 않습니다. 다음의 간단한 대안은 같은 로컬 이미지 파일을 사용하고 대상 이미지를 명시적으로 지정합니다.
이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.
<img
id="attribute-demo"
src="change-image-hover-using-event-listeners.webp"
alt="Abstract still life with a coral disc and teal geometric shapes"
onmouseover="changeDemoImage(true)"
onmouseout="changeDemoImage(false)"
>
<script>
function changeDemoImage(isHovering) {
const image = document.querySelector('#attribute-demo');
image.src = isHovering
? 'change-image-hover-using-onmouseover-and-onmouseout.webp'
: 'change-image-hover-using-event-listeners.webp';
image.alt = isHovering
? 'Abstract still life with dark spheres and curved shapes in blue and orange'
: 'Abstract still life with a coral disc and teal geometric shapes';
}
</script>
여기서 onmouseover는 호버 이미지를 선택하고 onmouseout는 처음 이미지를 복원합니다. 인라인 핸들러는 짧은 예제에 편리하지만, 페이지가 커질수록 리스너를 사용하면 마크업과 동작을 분리하기 쉽습니다.
jQuery .hover()로 이미지 바꾸기
jQuery의 .hover()에는 포인터가 들어올 때 실행할 콜백과 나갈 때 실행할 콜백을 하나씩 전달할 수 있습니다. 페이지에 jQuery가 이미 포함된 경우에만 사용하세요. 이 메서드는 브라우저 JavaScript의 일부가 아닙니다. 다음 브라우저 코드는 설명용이며 jQuery 라이브러리가 로드되었다고 가정합니다.
이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.
<img
id="jquery-demo"
src="change-image-hover-using-event-listeners.webp"
alt="Abstract still life with a coral disc and teal geometric shapes"
>
<script>
const originalSrc = 'change-image-hover-using-event-listeners.webp';
const hoverSrc = 'change-image-hover-using-onmouseover-and-onmouseout.webp';
$('#jquery-demo').hover(
function () {
$(this).attr('src', hoverSrc);
$(this).attr('alt', 'Abstract still life with dark spheres and curved shapes in blue and orange');
},
function () {
$(this).attr('src', originalSrc);
$(this).attr('alt', 'Abstract still life with a coral disc and teal geometric shapes');
}
);
</script>
첫 번째 콜백은 포인터가 들어올 때, 두 번째 콜백은 나갈 때 실행됩니다. $가 정의되지 않았다면 jQuery가 로드되지 않았거나 해당 범위에서 사용할 수 없는 것입니다. 이 경우 바닐라 JavaScript 리스너 버전을 사용하세요.
예제를 확인하고 자주 발생하는 문제 해결하기
브라우저 예제는 이 문서 번들의 로컬 WebP 리소스를 사용하므로 해당 파일을 문서와 함께 보관하세요. 이미지가 바뀌지 않으면 브라우저 개발자 콘솔을 확인하고, 선택자가 요소와 일치하는지 점검한 다음, 두 경로의 철자와 대소문자가 정확한지 확인하세요. 호버 이미지는 표시되지만 원래 이미지로 돌아오지 않는다면 나갈 때 실행되는 핸들러가 같은 요소에 연결되어 있는지, 저장해 둔 원래 경로를 사용하는지 확인하세요.
호버는 포인터를 이용하는 상호작용이므로 터치만 사용하는 모든 사용자가 이용할 수 있는 것은 아닙니다. 필수 정보를 이 효과로만 제공하지 마세요. 사용자가 콘텐츠를 선택하거나 표시해야 한다면 보이는 컨트롤이나 이에 준하는 다른 상호작용도 제공하세요. Node.js 예제는 브라우저 이미지를 렌더링하지 않고 이미지 소스가 바뀌는 과정을 보여 줍니다. 브라우저 예제는 소스 코드로 제시되며 제공된 런타임 증거에서는 실행되지 않았습니다.
