Function to change image by input value

[KeredDrahcir]

Since <input>s are not easily customisable, I'm using an image to replace a checkbox with a hidden input to store the value. I want three options (0, 1 or 2) and I want the user to be able the click on the checkbox a second time to select the second option before a third click deselects it again.
The function I've used before and it worked so I can't see why it isn't this time. Can anyone help me please?

This is the function:

function change_image($div_name, $hidden_name)
	  {
	    var $check=document.getElementById($hidden_name).value;
	    if ($check==0)
	    {
	      document.getElementById($div_name).innerHTML="<img alt='' src='icons/no_tick.png' onmouseover=\"this.src='icons/tick_select.png'; this.style.cursor='hand';\" onmouseout=\"this.src='icons/no_tick.png'\" onclick=\"document.forms.forms_manager."+$hidden_name+".value='1';  javascript:change_image('"+$div_name+"', '"+$hidden_name+"');\">";
	    }
	    else if($check==1)
	    {
	      document.getElementById($div_name).innerHTML="<img alt='' src='icons/tick.gif' onmouseover=\"this.src='icons/tick_on_select.gif'; this.style.cursor='hand';\" onmouseout=\"this.src='icons/tick.gif'\" onclick=\"document.forms.forms_manager."+$hidden_name+".value='2';  javascript:change_image('"+$div_name+"', '"+$hidden_name+"');\">";
	    }
	    else if($check==2)
	    {
	      document.getElementById($div_name).innerHTML="<img alt='' src='icons/tick_red.gif' onmouseover=\"this.src='icons/tick_red_select.gif'; this.style.cursor='hand';\" onmouseout=\"this.src='icons/tick_red.gif'\" onclick=\"document.forms.forms_manager."+$hidden_name+".value='0';  javascript:change_image('"+$div_name+"', '"+$hidden_name+"');\">";
	    }
	  }

The code that calls the function is this:

<div id="animal1" style="display: inline;">
<img alt="" src="icons/no_tick.png" onmouseover="this.src='icons/tick_select.png'; this.style.cursor='hand';" onmouseout="this.src='icons/no_tick.png'" onclick="document.forms.['animal_name']['animal1_key'].value='1';  javascript:change_image('animal1', 'animal1_key');">
</div>
                        <input type="hidden" name="animal1_key" id="animal1_key" value="0"/>