Responses to replacing images will work. However, by doing this in images, you end up using more bandwidth than you really need to use for this. One of two things will happen: either people upload a bunch of images that they never upload, or they will have to wait to upload a new image every time they click. For users with a high-speed connection, this will not be a problem, but there is a certain opportunity for users of slow connections (or, possibly, mobile devices) to perceive this as negative.
It would be better to have only one version of the image, which looks like on the first boot. The trick is to make the numbers in the image transparent. Then you can simply change the browser to the background color when clicked. And as a bonus, if you ever want to add other colors to indicate other things, it's easy! And you can select any combination of numbers.
After some experimentation, I found that the style attribute on <area> cannot be used to set the background colors, so you need something else to enforce the colors. I suggest <div> located in the same place as each circle, through something like: <div id='div1' style='position:relative; top:-400px; left:5px; height:30px; width:30px; z-index:-1'> </div> <div id='div1' style='position:relative; top:-400px; left:5px; height:30px; width:30px; z-index:-1'> </div> <div id='div1' style='position:relative; top:-400px; left:5px; height:30px; width:30px; z-index:-1'> </div> where you have to adjust the upper / left values to put them where you need it. z-index:-1 it is important that it is displayed behind the image. To experiment with the placement of these divs, you can go ahead and set the background color to something so that you can see them.
Once you have a transparent image and you have all the divs selected, you just need a little jQuery to activate it. Something like that:
$('area').click(function(){ var number = $(this).attr('title'); $('#div'+number).css('background-color', 'red'); })