By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,949 Members | 1,094 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,949 IT Pros & Developers. It's quick & easy.

Function to change image by input value

KeredDrahcir
100+
P: 426
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:
Expand|Select|Wrap|Line Numbers
  1. function change_image($div_name, $hidden_name)
  2.       {
  3.         var $check=document.getElementById($hidden_name).value;
  4.         if ($check==0)
  5.         {
  6.           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+"');\">";
  7.         }
  8.         else if($check==1)
  9.         {
  10.           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+"');\">";
  11.         }
  12.         else if($check==2)
  13.         {
  14.           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+"');\">";
  15.         }
  16.       }
The code that calls the function is this:
Expand|Select|Wrap|Line Numbers
  1. <div id="animal1" style="display: inline;">
  2. <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');">
  3. </div>
  4.                         <input type="hidden" name="animal1_key" id="animal1_key" value="0"/>
Aug 16 '14 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.