title: How to change a link image on mouse over on jquery
body: <p>I need to change a link image on mouse hover. I used the following code but does not work. Perhaps the problem is with the image source but I still cannot find what's wrong with he code.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; 
  &lt;head&gt;&lt;title&gt;Edit Document&lt;/title&gt; 
  
  &lt;script src="../Scripts/jquery-1.3.2.js" type="text/javascript"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript"&gt; 
  
          $(document).ready(function () {
          $("#lnkEdit").hover(
          function () {
              this.src = this.src.replace("../images/edit_off.gif", "../images/edit_on.png");
          },
          function () {
              this.src = this.src.replace("../images/edit_on.png", "../images/edit_off.gif");
          }
          );
      });
  
  &lt;/script&gt; 
  &lt;/head&gt; 
  &lt;body&gt; 
  &lt;form method="post" action="Hover4.aspx" id="form1"&gt; 
  &lt;div class="aspNetHidden"&gt; 
  &lt;input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNTkwNjIyODQxZGR6kotcsbIsWRfokZrzasCtfPi0dxz4MBWWh9VxSJ6R0Q==" /&gt; 
  &lt;/div&gt; 
  
  &lt;div&gt; 
      &lt;a id="HyperLink1" href="Hover4.aspx"&gt;&lt;img src="../images/edit_off.gif" alt="HyperLink" /&gt;&lt;/a&gt; 
  &lt;/div&gt; 
  &lt;/form&gt; 
  </code></pre>
  
  <p> 
      </p>
  
  <p>Thanks in advance.</p>