Can jQuery replace a linked image when link is active?
<p>I am currently trying to achieve something pretty simple, at least in my eyes, however for some reason it's impossible to achieve. But I am guessing it can be done with jQuery though. But I lack the skills.</p>

<p>I have a few menu items for example:</p>

<ul>
<li>Home</li>
<li>News</li>
<li>Fun</li>
<li>Contact</li>
</ul>

<p>All of those links open a new page.</p>

<p>Now I am using images for those links. And I want an image over the current image, when a link is active (not hover).</p>

<p>With CSS this can be done pretty easily when all links are located on the same page with anchor points (a.home-link:active). However this of course does not work when linked to a different page.</p>

<p>Can this be done with jQuery...?</p>

<p><strong>Update:</strong></p>

<p>Someone adviced me to use: <code>$("#myImage").attr("src", "path/to/newImage.jpg");</code></p>

<p>So I did it like this:</p>

<p>Step 1:</p>

<pre><code>&lt;script type="text/javascript" src="js/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
</code></pre>

<p>Step 2:</p>

<pre><code>&lt;script type="text/javascript"&gt;
$("#testlink").attr("src", "active.png");
&lt;/script&gt;
</code></pre>

<p>Step 3:</p>

<pre><code>&lt;a class="active" href="testpage.php"&gt;&lt;img src="standard.png" alt="standard" width="64" height="64" border="0" /&gt;&lt;/a&gt;
</code></pre>

<p>But that didn't work, because it doesn't do anything at all.... :(</p>

<p><strong>//Update #2</strong></p>

<p>Well I appreciate the answers and the effort from you guys, but I cannot get this working. I don't think this should be so difficult to achieve.</p>

<p>Maybe I didn't explain everything correctly, so I will try to explain it better this time by giving a better example.</p>

<p>With CSS and anchor points, you can format the link which is active, in this case display a different image. When nothing has been clicked the non-active.png will be shown, if one of the links is clicked (and active) it would show active.png for the active link (I don't want any hover effects, only active and not-active).</p>

<p>This can be done easily with anchor points normally when everything is on the same page, however since my links point to different pages, this obviously doesn't work. If I use anchor points in this situation, the clicked link won't be active anymore and will remain not-active.</p>

<p>Maybe this is a better explanation of what I am trying to achieve. Maybe I don't even need jQuery, but I thought this has to be used to get the desired effect I am looking for...?</p>

<p>Thanks once again and again I am sorry for asking stupid questions.</p>
