title: onmouseover and onmouseout images not loading
body: <p>On my personal website, I was trying to create some basic animation using <code>onmouseover</code>/<code>onmouseout</code>. The first URL represents a small (50 x 50) grey scale image and the second URL is the same image but in color.</p>
  
  <pre><code>&lt;a&gt;&lt;img src="link" onmouseover="this.src='url1'" onmouseout="this.src='url2'"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>The code is functional, but it has some issues. I've noticed that both on desktop and mobile after the image link has been clicked, the image disappears. It makes sense that the browser wouldn't load any new images, but I was wondering if there was a better alternative.</p>