Change the destination href of an img element by copying the img element src and changing it in jQuery
<p>I have the following HTML:</p>

<p><strong>Current HTML</strong></p>

<pre><code>&lt;div id="testContainer"&gt;
 &lt;a href="testPage.htm" target="_top"&gt;
    &lt;img src="/res/images/testImage_M.jpg?lc=en-GB&amp;lv=5.jpg" alt="Test" width="153" height="188" class="linkImage" /&gt;
 &lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>I want to be able to use the img src, change part of it (M.jpg with XXL.jpg) and replace the parent href with the image source.</p>

<p><strong>Desired end result</strong></p>

<pre><code>&lt;div id="testContainer"&gt;
     &lt;a href="/res/images/testImage_XXL.jpg?lc=en-GB&amp;lv=5.jpg" target="_top"&gt;
        &lt;img src="/res/images/testImage_M.jpg?lc=en-GB&amp;lv=5.jpg" alt="Test" width="153" height="188" class="linkImage" /&gt;
     &lt;/a&gt;
    &lt;/div&gt;
</code></pre>

<p>I know the .attr() and .removeAttr() but I'm clueless how to change only part of the original img src.</p>
