html - highlight the image icon when clicked on it -

i have 3 images icons different use.

now want is,

if first icon clicked, first icon should highlighted, if second clicked second icon should highlighted.

please see html ref:-

<tr>         <td width="18%" height="40" align="left" valign="middle"></td>         <td style="text-align: left; vertical-align: middle;" width="6%">             <input type="checkbox" id="branchchkbx" title="branch" checked="checked" class="hidechkbx" />             <a href="locatebranches_rbl_view.aspx" style="color: #666; font-family: 'signika_negativeregular', sans-serif;">                 <img alt="branch" src="images/branch_icon.png" height="40" width="40" title="branch" style="border: 0;" />                 <p class="para01">branch</p>             </a>         </td>         <td style="text-align: left; vertical-align: middle;" width="5%">             <input type="checkbox" id="atmchkbx" title="atm" checked="checked" class="hidechkbx" />             <a href="locateatm_rbl.aspx" style="color: #666; font-family: 'signika_negativeregular', sans-serif;">                 <img alt="atm" src="images/atm_icon.png" height="40" width="40" title="atm" style="border: 0;" /><p class="para01">atm</p>             </a>         </td>         <td style="text-align: left; vertical-align: middle;" width="6%">             <input type="checkbox" id="lockerchkbx" title="locker" checked="checked" class="hidechkbx" />             <a href="locatelockers_rbl.aspx" style="color: #666; font-family: 'signika_negativeregular', sans-serif;">                 <img alt="locker" src="images/locker_icon.png" height="40" width="40" title="locker" style="border: 0;" /><p class="para01">locker</p>             </a>         </td>         <td width="6%" height="40" align="left" valign="middle" style="border-left: 1px solid #cccccc;">             <a id="a1" href="default.aspx" runat="server" style="float: left; text-decoration: underline; color: #666; margin-left: 12px; font-family: 'signika_negativeregular', sans-serif;">                 <p class="para01">view all</p>             </a>         </td>     </tr> 

also see css:-

.para01 {         font-size: 16px;         margin-top: 6px;         font-weight: bold;         margin-top: 10px;     } 

please help

your best option should make images css sprite, , change background-sizes. if that's hard you, can make images background of tag. so:

a {    background: url('image.png') no-repeat center center; } a.highlighted {    background-image: url('image-highlight.png'); }