title: Change Image On Hover Javascript
body: <p>I have done my research and looked at tons of things, but none of them are working for me. This is my code at the moment. The original image displays fine, but nothing happens when I hover.</p>
  
  <p><strong>Javascript</strong> (In <code>&lt;head&gt;</code>)</p>
  
  <pre><code>&lt;script&gt;
      function onHover()
      {
          $("#news").attr('src', 'img/newsHover.png');
      }
  
      function offHover()
      {
          $("#news").attr('src', 'img/news.png');
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;img id="news" onmouseover="onHover();" onmouseout="offHover();" height="100px" width="100px" src="img/news.png"&gt;&lt;/a&gt;
  </code></pre>