Computer >> Computer tutorials >  >> Programming >> Javascript

A Quick Way to Swap an Image on mouseOver/mouseOut with inline JavaScript

This is a quick and simple inline JavaScript approach to swap a default image with another image when you move your mouse over it — and then swap back to the default when you move your mouse out again:

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

This example is identical, but uses external placeholder images as the image sources:

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

Code demo