At 480px or less, change image and when clicked on revert back to the old image
<p>I'm totally new to JQuery and still learning so i need some help with this one. I have a webpage with a banner on it and when the screensize is 480px or less it will replace the banner with a temporary image to make it faster for mobile users. So fas so good. But now to the problem. When users click on this temporary image it should revert back to the old image. In this case, the banner. How can i accomplish this?</p>

<p>My code so far:</p>

<pre><code>$("document").ready(function() {
    if ( $(window).width() &lt;= 480) {
            $("#img").attr("src", "temp_image.jpg");
    }
});
</code></pre>

<p>And the HTML:</p>

<pre><code>&lt;div id="banner"&gt;
     &lt;a href="#"&gt;&lt;img id="img" src="banner.jpg" alt="banner" /&gt;&lt;/a&gt;
&lt;/div&gt;
</code></pre>
