Change image when selected

[dc_jt]

Hi Im having a problem with the following:

 

I have four images, a red image, vanilla, chocolate and caramel.

 

These are in a form and upto two need to be selected, no more!

 

I have created four hidden checkboxes to act for each colour and now need to somehow say if the red checkbox is checked then show a certain image else show a different image.

 

How do I do this? Here is an example so far of the red button:

 

function checkColour(myColour) {
    	
        if (document.getElementById(myColour).checked == false){
        document.getElementById(myColour).checked=true;
        } else {
        document.getElementById(myColour).checked=false;
        }
    }

<li><a onclick="javascript:checkColour('red');"><img src="../assets/images/shop/flavour-red-off.gif" alt="red" width="30" height="30" border="0" /></a>Red</li>

<div style="display:none">
<input name="red" type="checkbox" id="red">red
</div>

 

As you can see at the moment the checkColour function checks the hidden checkbox, however I now need to change the flavour-red-off.gif image to flavour-red-on.gif if its checked.

 

Hope someone can help

 

THanks

[dc_jt]

Its ok I have done it now.

 

The only thing I need to do now is count how many have been selected.

 

Any idea how I would do this?

 

Thanks

[phpQuestioner]

 

Where do you want the count to appear; in a textbox or in the page?