Javascript onmouseover event working but need to reverse upon mouse "not over"

Question

So I have:

<img src="image1.png" 
     width="300" 
     height="115" 
     onmouseover="this.src='image1.png';" 
     onmouseout="image2.png">

This is working great, but once I hover and the second image turns on, I need it to turn off when I remove the cursor. Any way to achieve this with the simple inline JS I have?

Answer 1

Just undo the change in the same way by setting the src:

<img src="image1.png" width="300" height="115" onmouseover="this.src='image2.png';" onmouseout="this.src='image1.png';">