인라인 JavaScript로 mouseOver/mouseOut의 이미지를 바꾸는 빠른 방법

이것은 기본 이미지 위로 마우스를 이동하면 기본 이미지를 다른 이미지로 바꾸는 빠르고 간단한 인라인 JavaScript 접근 방식입니다. 그런 다음 마우스를 다시 밖으로 이동하면 기본 이미지로 다시 전환합니다.

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

이 예는 동일하지만 외부 자리 표시자 이미지를 이미지 소스로 사용합니다.

<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"
/>

코드 데모