jQuery: Change image on checkbox click
<p>I want to change an image when a checkbox is clicked. Until the new image is fully loaded a loader image should appear on top of the current image. While loading the opacity of the current image should also change to 0.5.</p>

<p>The function should therefore consist of the following steps:</p>

<p>On checkbox click:</p>

<ul>
<li>Change img src</li>
</ul>

<p>While loading:</p>

<ul>
<li>Set opacity of current image to 0.5</li>
<li>Display loader.gif</li>
</ul>

<p>When new image is loaded:</p>

<ul>
<li>Change opacity back to 1.0</li>
<li>Hide loader.gif</li>
<li>Display new image</li>
</ul>

<p>How can this be done with jQuery?</p>

<p>Thanks in advance for all proposals!</p>
