highlight the image icon when clicked on it - html

Question

I Have 3 Images as icons for different use.
Now what I want is,
If the first icon is clicked, the first icon should be highlighted, if second is clicked the second icon should be highlighted.
Please see the HTML for your 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 the CSS:-
.para01 {
font-size: 16px;
margin-top: 6px;
font-weight: bold;
margin-top: 10px;
}
Please help

Answer 1

Your best option should be to make the images into css sprite, and change background-sizes. If that's hard for you, you can just make images background of the A tag. Like so:
a {
background: url('image.png') no-repeat center center;
}
a.highlighted {
background-image: url('image-highlight.png');
}

Answer 2

Did it like this
CSS
para01 {
font-size: 16px;
margin-top: 6px;
font-weight: bold;
/*line-height: 1.5em;*/
margin-top: 10px;
}
.highlight {
background: yellow;
}
.imghighlight{
height:50px;
width:50px;
}
JQuery:-
$(document).ready(function () {
$('input.hideChkbx').on('change', function () {
$('input.hideChkbx').not(this).prop('checked', false);
$('input.hideChkbx').not(this).parent().find("img").removeClass("imghighlight");
$('input.hideChkbx').not(this).parent().find(".para01").removeClass("highlight");
if ($(this).is(':checked')) {
$(this).parent().find("img").addClass("imghighlight");
$(this).parent().find(".para01").addClass("highlight");
}
});
});
And it worked