How to change a link image on mouse over on jquery
<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>
