인라인 JavaScript로 마우스 오버/아웃 시 이미지 교체하는 빠르고 간단한 방법

웹 페이지에서 마우스를 이미지 위에 올렸을 때 기본 이미지를 다른 이미지로 교체하고, 마우스를 치우면 다시 원래 이미지로 되돌리고 싶은 경우가 종종 있습니다. 이럴 때 별도의 CSS 파일이나 외부 스크립트 없이 인라인 JavaScript만으로 아주 간단하게 구현할 수 있습니다.

기본 사용법

onmouseover와 onmouseout 속성을 <img> 태그에 직접 추가하면 됩니다:

<img
  onmouseover="this.src='new-image.png'"
  onmouseout="this.src='default-image.png'"
  src="default-image.png"
/>

동작 원리는 매우 단순합니다. 마우스 포인터가 이미지 위에 올라가면 this.src 값이 새 이미지 경로로 변경되고, 마우스가 이미지를 벗어나면 다시 기본 이미지 경로로 되돌아갑니다.

외부 이미지를 사용한 예시

아래 예시는 동일한 방식이지만, 외부 플레이스홀더(placeholder) 이미지를 소스로 사용하여 실제 동작을 바로 확인할 수 있도록 한 것입니다:

<img
  onmouseover="this.src='https://via.placeholder.com/150/0000FF/FFFFFF/?text=Digital.com'"
  onmouseout="this.src='https://via.placeholder.com/150/FF0000/808080/?text=Down.com'"
  src="https://via.placeholder.com/150/FF0000/808080/?text=Down.com"
/>

참고 사항

플레이스홀더 이미지 서비스는 언제든 중단될 수 있으므로, 실제 프로젝트에서는 직접 준비한 이미지 파일 경로를 사용하는 것이 좋습니다. 또한 이미지 전환 시 로딩 지연을 줄이려면 두 이미지를 미리 브라우저 캐시에 로드해 두는 것이 효과적입니다. 더 복잡한 호버 효과가 필요하다면 CSS의 :hover 선택자나 JavaScript 이벤트 리스너를 활용하는 방법도 고려해 보세요.

코드 데모