Image changing use buttons

I have a main image on a page im creating, i would like to change it using a button that the user selects. There is a maximum 3 image changes plus the original image that is displayed when the page loads.

I would like it so that when you click on the button image A, turns into image B and if you click again you get back to image A.

now i have the code for this already and have it working

<script language="JavaScript">
<!--
var x = 0;

function chngImg()
{
if (x == 0)
{
x = 1;
document.getElementById("image a").src = image b.gif';
}
else
{
x = 0;
document.getElementById("image a").src = 'image a.gif';
}
}
//-->
</script>


and heres the html tag


<input type="button" value="Show image b" onclick="chngImg()" name="imgName"></input>


The problem im having is modifying the same javascript to work for image C and D

any help would be most highly appreciated.

Validate your code (http://validator.w3.org) and clear all markup errors if any. I think space in the value of id attribute is invalid.

PS:Post your html also, to get a better idea on what you've done so far.

the space is something i have placed in there to obscure the original variable name for reasons i wont go into now. the code works and does the switching i need what i really need to know is how do i modify/replace it so that i can do the same but with 2 more buttons and images

Here's the relevant parts of my HTML


<input type="button" value="Show Image B" onclick="chngImg()" name="imgName"></input>
<input type="button" value="Show Image C" onclick="chngImg()" name="imgName"></input>
<input type="button" value="Show Image D" onclick="chngImg()" name="imgName"></input>

<img src="Image A.gif" usemap="#imgMap" border="0" width="1024" height="768" alt="map" name="imgName" id="map">
<map id="imgMap" name="imgMap">

<img src="Image A.gif" usemap="#imgMap" border="0" width="1024" height="768" alt="map" name="imgName" id="map">
If you are trying to change the src of the above image
document.getElementById("image a").src = image b.gif';
should be document.getElementById("map").src = image b.gif';

And you need to pass some value in onclick="chngImg()" like
onclick="chngImg(0)" and then receive this value in the function like
function chngImg(x)

PS: use the same value for name and id attribute of img tag

thanks that helped things but i maanaged to solve the problem with a large amount of help from a devloper freind of mine AKA mighty_mike