a calculator which uses images

[Lumpy500]

so im looking to find if theres a way to make a calculator, which when an image is clicked, its value, say 2, and then clicked again will make the value 4, etc etc

buttons with images dont work on it =[

[Nile]

Calc:

<script type="text/javascript">
var calculators = new Array();
calculators['calc'] = 0;  //where it starts
var $ = function(el){ return document.getElementById(el); };
var addTo = function(id, many){
  if(typeof(calculators[id]) == "undefined"){
    alert("Please define calculators["+id+"]!");
    return ;
  }
  calculators['calc'] = calculators['calc']+many;
  $(id).firstChild.nodeValue = calculators['calc'];
}
</script>
<div id="calc">0</div>
<img onclick="addTo('calc',1);" src="http://www.managenergy.tv/metv/images/step1.gif" />
<img onclick="addTo('calc',2);" src="http://static.grazr.com/images/big2.png" />
<img onclick="addTo('calc',3);" src="http://www.tsa.gov/graphics/images/311-3.gif" /><br />
<img onclick="addTo('calc',4);" src="http://progressreport.cancer.gov/images/number-4.gif" />
<img onclick="addTo('calc',5);" src="http://gsaauctions.gov/brow_details/sm_5.gif;pv2956792b1942250d" />
<img onclick="addTo('calc',6);" src="http://www.slba.se/journaldigital/REEL_HISTORY/BILDER/silverknapp_6.gif" /><br />
<img onclick="addTo('calc',7);" src="http://www.seismo.unr.edu/ep/nvguide/images/7.gif" />
<img onclick="addTo('calc',8);" src="http://www.archive-it.org/images/b_8_on.gif" />
<img onclick="addTo('calc',9);" src="http://www1.umn.edu/nts/images/buttons/button9.png" />

It's like a cut out calculator.