jquery swap images on click and hide then
<p>I'm trying to build a menu. OVer a canvas I load different images and position them using CSS. Currently I operate with SHOW / HIDE with a lots of code duplication. My questions are:
- instead of just hidding an image, how can I change it on click with another one? and then again hide it, if I should click another button?
- is it possible to write all this code somehow simpler?</p>

<p>Thanks a lot...</p>

<pre><code>   $("#ten").click(sizeTen);
function sizeTen(){
    cb_ctx.lineWidth = 10;
    clickSound();
    $(this).hide();
    $("#twenty").show();
    $("#forty").show();
    $("#sixty").show();
}

$("#twenty").click(sizeTwenty);
function sizeTwenty(){
    cb_ctx.lineWidth = 20;
    clickSound();
    $(this).hide();
    $("#tenClick").show();
    $("#ten").show();
    $("#forty").show();
    $("#sixty").show();
}

$("#forty").click(sizeForty);
function sizeForty(){
    cb_ctx.lineWidth = 40;
    clickSound();
    $(this).hide();
    $("#ten").show();
    $("#twenty").show();
    $("#sixty").show();
}

$("#sixty").click(sizeSixty);
function sizeSixty(){
    cb_ctx.lineWidth = 60;
    clickSound();
    $(this).hide();
    $("#ten").show();
    $("#twenty").show();
    $("#forty").show();
}
</code></pre>
