title: Why won't this image change on mouse over using this.src?
body: <p>I'm stumped. I have no idea why this won't change the image source on mouse over ... I created a separate test page and did this no problem, but it won't work with my actual div page ...</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="nav"&gt;
      &lt;div id="nav_left"&gt;
          &lt;table class="nav_left"&gt;
              &lt;tr&gt;&lt;td&gt;
                  &lt;img src="arrowdown.png" onmouseover="this.src='arrowdownhover.png'" onmouseout="this.src='arrowdown.png'"/&gt;
              &lt;/td&gt;&lt;/tr&gt;
          &lt;/table&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#nav {
      background-color: #272729;
      width: 99%;
      margin: 0 auto;
      height: 55px;
  }
  
  #nav_left {
      width: 30%;
      display: inline-block;
      height: 55px;
  }
  table.nav_left {
      padding: 0;
      margin: 0;
      border-right: 1px solid black;
      height: 55px;
      width: 10%;
      text-align: center;
      float: left;
      margin-right: 1em;
  }
  </code></pre>