I have a script that will swap a pair of images based on the status of a check box, but what I need is to adapt it to handle multiple pairs of images. I've tried numerous variations of the code to no avail. Below is the URL to a demonstration of the code. When you click the check box for the 'Red Pair' the ghosted red dot turns into a deep red dot. The 'Green Pair' is a fake -- everything inside the dotted line is merely a singe image I placed there just for illustration.


http://www.jeffs-icons.com/BROOKLYN/flip_test-1.html

The code for the image swap looks like this:

<head>
<script type="text/javascript">
function processCheckbox(checkbox) {
if (checkbox.checked) {
image.src = "ICONS/Z-red.png";
image.onclick = enabledClick;
} else {
image.src = "ICONS/Z-red-ghosted.png";
image.onclick = null;
}
}
function enabledClick() {
alert("enabled!");
}
</script>
</head>


<body>

<form style='display:inline;' name="form-001" method="post" action="">
<input type="checkbox" onclick="processCheckbox(this);">
</form>

<img src="ICONS/Z-red-ghosted.png" id="image">

</body>


How do I adapt this code for both the 'Red Pair' and the 'Green Pair' of images?