Modify all img src tags in a particular way
<p>I want to use <a href="http://phpthumb.sourceforge.net/" rel="nofollow">phpThumb</a> to resize all images in the content divs of my pages when they are served up to mobile devices.</p>

<p>So in my page templates for mobile devices I need to change all <code>&lt;img&gt;</code> tags in <code>&lt;div id="content&gt;</code> in the following manner:</p>

<pre><code>&lt;img src="/images/image_01.jpg"&gt;
-&gt; &lt;a href="/images/image_01.gif"&gt;
     &lt;img src="phpThumb.php?src=images/image_01.jpg&amp;w=300"&gt;
   &lt;/a&gt;

&lt;img src="/images/image_02.gif"&gt;
-&gt; &lt;a href="/images/image_02.gif"&gt;
     &lt;img src="phpThumb.php?src=images/image_02.gif&amp;w=300"&gt;
   &lt;/a&gt;
</code></pre>

<p>What is the best way to do this?</p>
